我想问您是否可以对不同的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;
}
感谢
是的,这非常好。
您可以简单地声明每个元素的背景图像,这样使用它:
.element1, .element2, .element3 {
background-image:url(image.png);
background-repeat:no-repeat;
}
然后像您所做的那样声明每个元素的背景位置。