在锚标签上使用CSS Sprites [英] Using CSS Sprites on anchor tags

问题描述

我正在寻找有关最佳结构的CSS专家建议。我实现的是图片而不是水平列表上的图标。当前html类似于：

I'm looking for some CSS guru advice on best structure. I'm implementing sprites instead of icons on a horizontal 'list'. Current html is like :

<a href="link"><img src="icon" /></a><a href="link_b"><img src="icon"/></a>

等。

所以我用一个精灵代替了。我正在使用

So I replace with a sprite. I'm using

<a href="link" class="sprite_img_a"></a><a href="link_b" class="sprite_img_b"></a>

但是要做到这一点，我给标签添加了内联块和宽度。我从不喜欢内联阻止，而且看起来笨拙。

but to do this I give the tag inline-block and width. I've never liked inline-block and it seems clunky.

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

Are there better options ? (nested span, div wrapper ?)

推荐答案

@karishma：内联块是一个不错的选择，但是如果不想这样做，可以使用下面的CSS。

@karishma: inline-block is a good option but if don't want it so, you can use the CSS below.

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）出于搜索引擎优化的目的，可以避免Google缓存不必要的图片。

It's good to use icon image in background because 1) it saves markup space & 2) it's good for SEO purposes to avoid unwanted images caches by Google.

这篇关于在锚标签上使用CSS Sprites的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！