CSS切割图片,使用一张包含很多ico等图片的素材使用在不同的元素里。CSS切割真正意义上的并不是切割,而是利用CSS的属性取图片其中的一部分显示出来。这样的好处就是大大减少了网页打开的时间,提高了网站体验度。
CSS实现一张大图切割的方式有两种,一种是作为某一个元素的背景图片,另外一种是利用img的属性。
1、img元素属性clip的rect。用法说明:
img{ position:absolute; clip:rect(20px 100px 50px 20px); }
clip的4个参数,分别是对应图片img的左上角为坐标起点,第1个参数y1是定位的y坐标(垂直方向)的起点,第二个参数x1定位的x坐标(水平方向)的起点 ,第三个y2定位的y坐标(垂直方向)的终点 ,第四个x2定位的x坐标(水平方向)的终点 。
2、用CSS中background属性。事例代码:
background:transparent url(123.jpg) no-repeat scroll -140px -20px;
transparent表示透明无颜色
-140px 表示水平位置在图片的-140px处(以图片的左上角为0,0)
-20px 表示垂直位置在图片的-20px处(以图片的左上角为0,0)
DIV+CSS图片背景切割减少请求次数 (转载网络)