由于某度众所周知的举动,让我搬离写了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