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

它会起作用，但您需要在您的<a> 标签上添加一个display:block。

#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 2

之所以有效，是因为li 默认具有display: block 属性。

锚标签没有

如果你将display: block应用到 a 它也会显示

Answer 3

锚标签是内联元素。这意味着它们的宽度和高度由它们的内容定义。你有空白的锚标签。

最简单的解决方案是使用display: inline-block 设置a 标签的样式。这允许您的 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 4

您可以为<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;
}

假设您使用的是精灵，您只需相应地移动背景位置。