内联图片实现css sprite

内联图片实现css sprite

内容提要： CSS Sprite是一种网页图片应用处理方式，允许我们将页面中的零星图片整合到一个大图中，使用background-image选择sprite图 片，width、height设置图片显示的区域，background-position设置所需图片的坐标位置。通过CSS Sprite方法将多张图片组装成一张，不但有效减少http请求

       CSS Sprite是一种网页图片应用处理方式，允许我们将页面中的零星图片整合到一个大图中，使用background-image选择sprite图 片，width、height设置图片显示的区域，background-position设置所需图片的坐标位置。通过CSS Sprite方法将多张图片组装成一张，不但有效减少http请求，还有降低了图片的尺寸。

这里我们仍然需要使用sprite来组装图片，只是使用的方式崇background-image变成inline image，@_~

首先我们先Bing一下css clip属性：

这个属性用于定义一个剪裁矩形。对于一个绝对定义元素，在这个矩形内的内容才可见。出了这个剪裁区域的内容会根据 overflow 的值来处理。剪裁区域可能比元素的内容区大，也可能比内容区小。

有点晦涩。上例子（捣鼓了半天，还是原图比较好，呵呵）：

下面是是一样有4个箭头的图片：

CSS Clip

首先我们需要一个img标签：

HTML

<img src="arrow-sprite.png" alt="right arrow" class="clip right-top" />

使用css clip，元素必须绝对定位 ，所以这里需要一个class='clip'用来设置默认的left和top定位值。通过每个元素唯一的一个class设置各自独立的样式，如下：

CSS

.clip        { position: absolute; top: 0; left: 0; }



.left-top    { clip:rect(0 48px 48px 0); }

.right-top   { clip:rect(0 96px 48px 48px); left: -48px; }

.left-btm    { clip:rect(48px 48px 96px 0); top: -48px; }

.right-4     { clip:rect(48px 96px 96px 48px); top: -48px;left: -48px; }

注意： 其中rect中的值分别对应于：top right bottom left，和我们经常使用的padding、margin的设置类似。

clip标签只是划出了整个sprite大图中某一表现需要的那部分，然而整个img的宽度还是该多大有多大（此例中试96*96），感谢有 position:absolute，通过设置图片为绝对定位使其脱离了文档流，无论图片有多大都不会影响到附近的其它元素，其中的top、left控制 元素的偏移，调整需要的那部分图片到恰当的位置，所以必须绝对定位。

现在绝对定位的img元素漂浮在文档中，如果你想让元素作为文档的一部分，可以在外面包一个相对定位的div：

HTML

<div>

    <img src="arrow-sprite.png" alt="right arrow" class="left-top" />

</div>

CSS

div{width:48px;height:48px;position:relative;}

浏览器加载

浏览器很聪明，页面中不同地方如果使用同一张图片，那么只会加载一次。就和我们经常使用的background一样

浏览器兼容性

该方法很好的工作在IE6、IE7、IE8、firefox、opera、Safari等一系列我所测试的浏览器，所以，放心的使用吧。

注意 ：css 规则要求，在clip属性值之间需要插入逗号（如果有人和我一样使用Aptana编写css代码，会看到相关的错误提示信息），但是显然老版本的IE不喜欢这些（ie6、ie7），幸运的是没有逗号的时候，在新版浏览器中，它们也能很好的工作。

后续思考

使用image实现sprite有几个好处：

1. 相对于空的span或div，img标签对搜索引擎和屏幕阅读器更加友好（alt属性能很好的描述图片的内容）；
2. 使用text-indent实现图片替换最大的问题是无法显示图片、而css起作用时用户没法看到文本内容，这种情况下alt的内容可以显示；
3. 页面中相同的图片，浏览器只会加载一次；

既然这么好，为什么网络上用的不多呢？

我想到的最大的局限是：对于那些无法查看样式、而图片显示正常的用户（比如手机用户），打开页面隔几行就看到一张无数小图拼起来的spite图片体验可是很不好的。

即使是需要掌握的，至于怎么用就要自己掂量了。