【原】css sprite 实现的两种较好方法

最新推荐文章于 2024-07-11 10:09:53 发布

步慢生错

最新推荐文章于 2024-07-11 10:09:53 发布

阅读量1.6k

点赞数

分类专栏：前端文章标签： css javascript 浏览器百度 url class

本文链接：https://blog.csdn.net/yukon12345/article/details/6831609

版权

前端专栏收录该内容

9 篇文章 0 订阅

订阅专栏

由于某度众所周知的举动，让我搬离写了5年的渣度空间，准备把技术性的文章定在CSDN了。这些都是文章备份。勿怪。。

鉴于最近有些抓取机器和抄袭者，把标题的【原】字都复制，我不得不声明：本文为 yukon12345原创，转载请注明出处http://blog.csdn.net/yukon12345

css sprite是大中型网站用的比较多的图片设置方法，具体可以百度百科。下面详细说说他的实现方法：

第一种是用一个占位标签来占图片大小的位置。然后设置这个占位标签的背景图片。百度空间一般多用第一种。

方法1实现代码：

==========================================

<style>
.test1{background:url("../img/big_img.gif") 0 -307px;width:222px;height:50px;display:inline-block;cursor:pointer;}
</style>

<body>
<a href="javascript://"><span class="test1"></span> css sprite代码 </a>
</body>

====================================

注意红字部分，普通占位标签如果是inline元素，会强制换行，而block元素必须有内容才会占据一个位置。因此用display:inline-block可以在占着 width:222px;height:50px;大小位置的同时，不强制换行。而cursor:pointer;就是鼠标指向出现手指状。一般用在含超链的图片上。
缺点：

1. inline-block存在浏览器兼容性问题。可能在某些版本浏览器中实现有问题。

2.语义不明。用span标签代替img标签，不符html语义规范。时间长了自己也不知道哪里有图片。语义属性如title，alt等也有问题

3.图片的垂直位置无法修改。如图

方法2：用img实现css sprite

实现方法：将img的背景设置成你想要展示的图片，但src设置成一个透明的gif图片。

实现代码：===============================

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
#test{background:url("../img/big_img.gif") 0 -307px;width:222px;height:50px;}
</style>
<a href="javascript://"><img id="test" src="../img/none.gif" align="absmiddle"/>css sprite代码</a>

==============================

缺点:需要一张透明 gif 图片。

优点：1.全浏览器兼容（只要支持css的）

2.语义明确是图片的就是一个img标签。并且就和正常图片一样，可以加alt，title等属性。

3.图片的垂直位置容易调整。如下图：设置img的align即可居中。

下面是big_img.gif