CSS: добавление фонового изображения-URL на тег привязки

Question

Я пытаюсь добавить социальные иконки в нижний колонтитул веб-страницы через одно изображение спрайта.

Я не могу получить тег <a> для background-image: url. Кажется, работает хорошо для других элементов, таких как <li>, хотя.

#no-work a {
  width: 50px;
  height: 50px;
  Background-image: url("http://via.placeholder.com/50x50/0ff");
}

#works li {
  width: 50px;
  height: 50px;
  Background-image: url("http://via.placeholder.com/50x50/0ff");
}

// This doesn't work
<ul id="no-work">
  <li>
    <a href=""></a>
  </li>
  <li>
    <a href=""></a>
  </li>
</ul>

// But why does this work???
<ul id="works">
  <li></li>
  <li></li>
</ul>

Answer 1

Вы можете указать высоту и ширину для <li>, а затем сделать метку привязки display: block, чтобы якорь занимал размер родительского элемента <li>.

Что-то вроде

#works li {
    display: inline-block; //if you are aligning on the same line
    width: 50px;
    height: 50px;
}

#works li a {
    display: block;
    Background-image: url("http://via.placeholder.com/250x250/0ff");
    background-repeat: no-repeat;
    background-attachment: fixed;
}

#works a.social-icon-specific-1 {
    background-position: 100px 100px; //position your sprite accordingly
}
#works a.social-icon-specific-2 {
    background-position: 200px 200px;
}

Предполагая, что вы используете спрайт, вы просто перемещаете фоновую позицию соответственно.

Answer 2

Якорные теги являются встроенными элементами. Это означает, что их ширина и высота определяются их содержимым. У вас есть пустые теги привязки.

Самое простое решение - присвоить тегам a display: inline-block. Это позволяет вашим значениям width и height работать. Смотрите правки в вашем коде:

#works-now a {
  display: inline-block;
  width: 50px;
  height: 50px;
  Background-image: url("http://via.placeholder.com/50x50/0ff");
}

#works li {
  width: 50px;
  height: 50px;
  Background-image: url("http://via.placeholder.com/50x50/0ff");
}

// This works now
<ul id="works-now">
  <li>
    <a href=""></a>
  </li>
  <li>
    <a href=""></a>
  </li>
</ul>

// But why does this work???
<ul id="works">
  <li></li>
  <li></li>
</ul>

Answer 3

Это будет работать, но вам нужно поставить display:block на ваш <a> тег.

#no-work a {
  display: block;
  width: 50px;
  height: 50px;
  background-image: url("http://via.placeholder.com/50x50/0ff");
}

#no-work a {
  display: block;
  width: 50px;
  height: 50px;
  background-image: url("http://via.placeholder.com/50x50/0ff");
}

#works li {
  width: 50px;
  height: 50px;
  background-image: url("http://via.placeholder.com/50x50/0ff");
}

<ul id="no-work">
  <li>
    <a href=""></a>
  </li>
  <li>
    <a href=""></a>
  </li>
</ul>

// But why does this work???
<ul id="works">
  <li></li>
  <li></li>
</ul>

Answer 4

Это работает, потому что li имеет атрибут display: block по умолчанию.

Тег привязки не

Если вы примените display: block к a, то оно тоже покажет

Answer 5

Попробуйте добавить

float:left;

к тегам привязки?

https://jsfiddle.net/karantewari/9hm7ypjk/