时间戳

首页 > 解决方案 > css：在锚标记上添加背景图像 URL

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

问题描述

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

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

标签： htmlcssimagebackground-image

解决方案

它会起作用，但你需要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>

推荐阅读