Question

我想问你是否可以对不同的HTML元素使用相同的背景图像？

意思是，我有HTML代码（它的一部分）：

<div class="src">
 <form action="#">
  <input type="text" class="text" />
  <input type="submit" class="submit" />
 </form>
</div>


<div class="menu">
 <ul class="level1">
  <li class="test1"><a href="#">Test1</a></li>
  <li class="test2"><a href="#">Test2</a></li>
 </ul>
</div>

和简单的css

.src {
 background: url(images.png) 0 -45px no-repeat;
}

.menu ul.level1 li {
 background: url(images.png) 0 0 no-repeat;
}

.menu ul.level1 li.test1 {
 background-position:-15px -120px;
}

.menu ul.level1 li.test2 {
 background-position: -50px -120px;
}

这项技术好吗？它占用的HTTP请求较少？

如何在CSS中编写通用背景图像并使用，对于不同的HTML元素，只使用背景位置？或者不可能？

意思是：

.generic {
 background: url(images.png) no-repeat;
}

.src {
 background-position: 0 -45px;
}

.menu ul.level1 li {
 background-position: 0 0;
}

.menu ul.level1 li.test1 {
 background-position:-15px -120px;
}

.menu ul.level1 li.test2 {
 background-position: -50px -120px;
}

由于

Answer 1

是的，这完全没问题。

您可以简单地为每个使用它的元素声明背景图像，如下所示：

.element1, .element2, .element3 {
 background-image:url(image.png);
 background-repeat:no-repeat;
}

然后像你一样声明每个元素的背景位置。

使用CSS sprite将单个背景图像用于不同的HTML元素

1 个答案: