css: 在锚标签上添加背景图像-url

Question

我正在尝试通过一个 sprite 图片在网页的页脚上添加社交图标。

我无法让 <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;
}

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

css: 在锚标签上添加背景图像-url

css: adding a background-image-url on an anchor tag

html

css

image

background-image