在网站设计编辑中,我们会往往取网上找图片素材,但是呢,找到的图片素材都在一张图片上,就比如说图标,图片如下:
如果让你只取其中一个图标,你是否在想用软件分割呢,其实并不用,css就可以实现只取其中之一并且不需要裁剪,步骤如下:
第一步:量出图标大小以及图标左上角位置
这里我们取第一行第二个图标显示,图标大小37X38,左上角位置为:82X22
第二步:设置显示div的大小为图标大小
<html> <head></head> <body> <style> .show{ width:37px; height:38px; } </style> <div class="show"></div> </body> </html>
第三步:设置div的背景图片为图标素材,并且显示图片素材中第二个图标的位置
<html> <head></head> <body> <style> .show{ background:transparent url(/images/2.png) no-repeat scroll -82px -22px ; width:37px; height:38px; } </style> <div class="show"></div> </body> </html>
显示如下:
是不是很神奇,其实主要靠的是其中
background:transparent url(/images/2.png) no-repeat scroll -82px -22px ;其中
background:transparent表示div背景透明,然后
url(/images/2.png)表示设置div的背景为图标素材图片
no-repeat 表示图片不重复
scroll -82px -22px 表示背景图片左边移动82个像素,向上移动22个像素,也就是说从x:82px y:22px开始显示图片
然而div只有一个图标的大小,所以显示出来的就只有一个图标大小,其余部分均为不可见。
其实还有另一个方法可以实现该功能,就是利用img的clip:rect函数,详情见:http://www.mihuguan.com/article/157579208375.html
jQuery2021-01-08
jQuery2021-01-07
MySQL2020-12-13
电脑2020-12-12
服务器2020-12-06
电脑2020-10-06