在锚定标记上使用CSS精灵
我正在寻找一些CSS大师关于最佳结构的建议。我正在实现精灵而不是水平“列表”上的图标。当前html类似于：在锚定标记上使用CSS精灵,css,css-sprites,sprite,Css,Css Sprites,Sprite,我正在寻找一些CSS大师关于最佳结构的建议。我正在实现精灵而不是水平“列表”上的图标。当前html类似于： <a href="link"><img src="icon" /></a><a href="link_b"><img src="icon"/></a> 等等 所以我换了一个雪碧。我正在使用 <a href="link" class="sprite_img_a"></a><a href
<a href="link"><img src="icon" /></a><a href="link_b"><img src="icon"/></a>
<a href="link" class="sprite_img_a"></a><a href="link_b" class="sprite_img_b"></a>
有更好的选择吗？（嵌套span，div wrapper？@karishma:
内联块是一个很好的选择，但如果您不想这样做，可以使用下面的CSS
a.sprite_img_a{
background:url('image.jpg') no-repeat 0 0 ;
float:left;
display:block;
width:30px;
height:30px;
}
a.sprite_img_a:hover{
background-position:-20px 10px ;
}
在后台使用图标图像很好，因为1）它节省了标记空间，2）它有利于搜索引擎优化，避免谷歌不需要的图像缓存。我通常这样做：
<a class="button sprite" href="#"><span class="sprite">Blah</span></a>
我喜欢你的技巧@sandeep和@hatake kakashi。一些可能的改进（尽管可能超出了问题的范围）。尝试按如下方式构建列表和html：
<style>
/* let your UL and LI handle the link positioning */
ul.sprites {width:somevalue;} /* <--clearfix this someplace cause of the floats inside*/
ul.sprites li {float:left;} /* <- these should collapse to the 30x30 width of the children */
ul.sprites li a {
display:block;
/*sprite dimensions*/
width:30px;
height:30px;
background: url('..images/spritesSheet.png') 0 0 no-repeat;
/*hide link text*/
text-indent: -9999em
overflow: hidden;
text-align: left;
}
/*adjust the background of the single sprite image file*/
ul.sprites a.spriteName1 {background-position:x y;}
ul.sprites a.spriteName1:hover {background-position:x y;}
ul.sprites a.spriteName2 {background-position:x y;}
ul.sprites a.spriteName2:hover {background-position:x y;}
/* etc...*/
</style>
<html>
<ul class="sprites">
<li><a class="spriteName1" href="#">link1</a></li>
<li><a class="spriteName2" href="#">link2</a></li>
</ul>
</html>
/*让您的UL和LI处理链接定位*/
ul.sprites{width:somevalue；}/*为什么现在需要内联块
？是给你的链接一个高度吗？是的。需要一些东西来强迫高度。狡猾。没有考虑过这一点。“通过谷歌避免不需要的图像缓存”-呃？@paul；首先感谢您编辑我的答案，因为我面临stackoverflow问题。第二，谷歌查奇只显示那些在img标签中没有背景的图像&第三，假设我有一个圆角图像。那么，把图片放在img或背景中有什么好处呢？啊，你不希望一堆图标图片把谷歌搞得乱七八糟。明白了。非常欢迎你。你展示的跨度是多少？好的。谢谢你的回答。我会尝试一下其他建议，看看什么最合适。
<style>
/* let your UL and LI handle the link positioning */
ul.sprites {width:somevalue;} /* <--clearfix this someplace cause of the floats inside*/
ul.sprites li {float:left;} /* <- these should collapse to the 30x30 width of the children */
ul.sprites li a {
display:block;
/*sprite dimensions*/
width:30px;
height:30px;
background: url('..images/spritesSheet.png') 0 0 no-repeat;
/*hide link text*/
text-indent: -9999em
overflow: hidden;
text-align: left;
}
/*adjust the background of the single sprite image file*/
ul.sprites a.spriteName1 {background-position:x y;}
ul.sprites a.spriteName1:hover {background-position:x y;}
ul.sprites a.spriteName2 {background-position:x y;}
ul.sprites a.spriteName2:hover {background-position:x y;}
/* etc...*/
</style>
<html>
<ul class="sprites">
<li><a class="spriteName1" href="#">link1</a></li>
<li><a class="spriteName2" href="#">link2</a></li>
</ul>
</html>