Определите изображение в CSS, а не в HTML
У меня проблема, и я не совсем понимаю, что не так.
У меня есть HTML-страница, и мои изображения в настоящее время связаны как таковые.
<span class = "tribar" onclick = "openNav()"><img src = "url_here"></span>
Я пытался удалить все URL-адреса изображений из исходного кода HTML и сохранить их в CSS. Это то, что я пробовал.
<span class = "tribar" onclick = "openNav()"></span> // HTML
.tribar {
display: inline-block;
background-image: url("image_url") no-repeat top left;
width: 220px;
height: 220px;
}
Но мой HTML-фрагмент становится пустым, и я не могу его понять.
Это должно быть простой ошибкой.
Моя ошибка, это была опечатка в SO, мой код этого не отражает. По-прежнему возникает та же проблема.
Используйте no-repeat вместо no=repeat
Не делай этого. Вам нужно что-то, на что люди могут щелкнуть, чтобы что-то сделать. Это <button>, а не <span>. Кнопки - это интерактивные элементы управления (они отображаются как таковые в программах чтения с экрана, вы можете перейти к ним, если не можете использовать мышь и т. д.). Вы также хотите, чтобы люди говорили о том, что будет делать нажатие на кнопку. Это Контент, а не Презентация. Правильное место для размещения контента - это HTML, а не CSS. Используйте <img> и присвойте ему атрибут alt.
См. Мой комментарий выше, в моем коде есть no=repeat. no=repeat здесь был опечаткой.
Ответы 3
Я бы рекомендовал сделать это с <button>:
function opennav() {
alert("Hello!");
}.nav-button {
border: none;
background: none;
font-size: 0; /*hide alt text*/
}
.nav-button:before {
display: inline-block;
content: url(http://placekitten.com/220/220);
width: 220px;
height: 220px;
cursor: pointer;
}<button class = "nav-button" onclick = "opennav()">Alt text for screen readers</button>См. Также CodePen.
Вы не можете использовать значение "не повторять" внутри свойства "фоновая картинка:". Вместо этого вы должны добавить эти две строки в свой стиль CSS:
background-position: top left;
background-repeat: no-repeat;
Если вы хотите сделать это одной строкой, вы должны использовать свойство "задний план:":
background: url("image_url") no-repeat top left;
номер
https://www.w3schools.com/cssref/pr_background-image.asp
https://www.w3schools.com/cssref/css3_pr_background.asp
Сохранять источник изображения в css можно до тех пор, пока на странице хранится URL-адрес ссылки или код кнопки.
Рекомендую такой способ:
a {
display: block;
width: 220px;
height: 220px;
}
.tribar {
display: block;
background-image: url("https://jobadder.com/wp-content/uploads/stackoverflow.com-300.jpg");
background-size: contain;
width: 100%;
height: 100%;
}<a href = "#"><span class = "tribar" /></a>
no=repeatнедействителен в css