在锚标签上使用CSS Sprite

我正在寻找一些关于最佳结构的CSS大师建议。我正在执行精灵而不是水平“列表”上的图标。当前的HTML是这样的：在锚标签上使用CSS Sprite

<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>

但要做到这一点我给标签行内块和宽度。我从来不喜欢内联块，它看起来笨重。

有更好的选择吗？（嵌套跨度，div封装？）

来源

2011-05-18 Karishma

为什么你现在需要'inline-block'？它是给你的链接一个高度？ – 2011-05-18 10:31:47

是的。有些东西需要强制高度。 – Karishma 2011-05-18 10:38:19

@karishma：inline-block是一个不错的选择，但如果不希望如此，您可以使用下面的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 &）它的良好的搜索引擎优化的目的，由谷歌避免不必要的图像缓存。

来源

2011-05-18 10:28:16 sandeep

狡猾。没有考虑到这一点。 – Karishma 2011-05-18 10:38:57

“避免Google不需要的图像缓存” - 呃？ – 2011-05-18 10:40:48

@paul;首先感谢编辑我的答案，因为我面临着与stackoverflow问题。第二谷歌chache只有那些在img标签不在背景和第三的图片假设我有一个圆角的图像。所以，将图像放在img或背景中是有好处的。 – sandeep 2011-05-18 11:17:13

我经常这样做：

<a class="button sprite" href="#"><span class="sprite">Blah</span></a>

这里是CSS：

.sprite{ 
    background: url("../images/sprite.png") no-repeat scroll left top transparent; 
} 
.button{ 
    background-position: 0 -80px; 
    color: white; 
    display: block; 
    float: left; 
    font-size: 0.75em; 
    height: 28px; 
    line-height: 28px; 
    margin-top: 7px; 
    overflow: hidden; 
    padding-left: 5px; 
    text-decoration: none; 
    cursor: pointer; 
} 
.button span{ 
    background-position: right -80px; 
    height: 28px; 
    color: white; 
    display: block; 
    float: left; 
    padding: 0 10px 0 5px; 
    position: relative; 
    text-transform: uppercase; 
    text-decoration: none; 
}

来源

2011-05-18 10:28:37

什么显示你给跨度？ – Karishma 2011-05-18 10:41:03

我刚刚更新了我的答案:) – 2011-05-18 11:25:13

好的。感谢您的回答。我会尝试其他建议，看看最合适的。 – Karishma 2011-05-18 12:04:41

我喜欢你的技术@sandeep和@旗木，卡卡西。一些可能的改进（尽管也许超出了问题的范围）。尝试构建您的名单和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>

这种方式，级联为你工作，并在此列表中的所有链接可以得到精灵造型没有多余的类名。你让你的父元素处理定位。至少，我认为这是正确的。语法和伪代码的歉意，因为我写它有点快而肮脏。

来源

2011-06-21 18:24:27 adc

在锚标签上使用CSS Sprite

回答

相关问题