Определите изображение в CSS, а не в HTML - PullRequest
Новая
       1

Определите изображение в CSS, а не в HTML

0 голосов
/ 14 ноября 2018

У меня проблема, и я на самом деле не уверен, что происходит не так.

У меня есть 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-диапазон становится пустым, и я не могу понять это.

Это должно быть простой ошибкой.

Ответы [ 3 ]

0 голосов
/ 14 ноября 2018

Нельзя использовать значение "no-repeat" внутри свойства "background-image:" .Вместо этого вы должны добавить эти две строки в свой стиль CSS: 

background-position: top left;
background-repeat: no-repeat;

Если вы хотите сделать это в одну строку, вы должны использовать "background:" property: 

background: url("image_url") no-repeat top left;

ref.
https://www.w3schools.com/cssref/pr_background-image.asp
https://www.w3schools.com/cssref/css3_pr_background.asp

0 голосов
/ 14 ноября 2018

Хорошо хранить источник изображения в 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>
0 голосов
/ 14 ноября 2018

Я бы порекомендовал сделать это с <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 .

...