CSS 调用png格式图标
css调用png格式图标的方法,自己开始也不会,在网上找了很久终于找到了,在这里分享给大家,也给自己保留着,不会的时候能看一下子。
如上图的一个PNG格式的图片:尺寸316*162
样式如下:
.aa{ width:158px; height:81px; background-image:url(images/sprite.png); background-position:0px -81px;}
html代码如下:
gai
以上代码选择的是
将png图标设置为了背景,并调用其中的一部分,其实是按照坐标来调用的。
首先,知道整张png图片的尺寸316*162,其中的每一个小块的大小为158*81
再次,background-position:0px -81px;这句是重点的,主要用到的是这句话,来定位X、Y轴坐标滴。
依次调用上图的四个:
① background-position:0px 0px;
② background-position:0px -81px;
③ background-position:-158px 0px;
④ background-position:-158px -81px;
因篇幅问题不能全部显示,请点此查看更多更全内容