css：在锚标记上添加背景图像 URL

Posted 2023-03-05

【中文标题】css：在锚标记上添加背景图像 URL

【英文标题】：css: adding a background-image-url on an anchor tag

【发布时间】：2018-10-22 08:11:52

【问题描述】：

我正在尝试通过一个单独的精灵图像在网页的页脚上添加社交图标。

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

【参考方案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>

【参考方案2】：

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

锚标签没有

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

【讨论】：

a 的默认 display 值是多少？我在 css-default 列表值上看不到它。 w3schools.com/cs-s-ref/css_default_values.asp 。此外，把display:block 工作

它没有默认的display 值。它通常被包裹在 <p></p> 或 h(x) 标签中，其中有 display: block

【参考方案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>

【讨论】：

啊，好吧，现在这更有意义了。 display: inline 是此处未指定的任何元素的默认值吗？ w3schools.com/cs-s-ref/css_default_values.asp

【参考方案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;

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