css从png里截取小图标的方法

这篇文章将为大家详细讲解有关css从png里截取小图标的方法,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。

css从png里截取小图标的方法:首先使用背景属性引入png图片,使用没有重演属性值设置图片不重复,然后使用背景位置属性设置图像初始位置,进行精确定位。

本教程操作环境:windows7多系统,CSS3&, HTML5版,戴尔G3电脑。

css文件

.icon 　　｛ 　　,,,背景:,url(程序),没有重演,,/* url为png图片的路径*/,,,/*宽度和行高分别对应每个小图标的宽和高*/,,,宽度:,20 px;,,,, 　　,,,行高:,:20 px; 　　,,,显示:,inline-block; 　　} 　　.icon-small 　　{,,/* png图片左上角为原点,往右往下均为负值*/,,,背景位置:,-150 px  0 px;/*对应小图标的坐标*/}

html文件

& lt; !——,联想一下Bootstrap 字体图标(Glyphicons), 　　,,,& lt; span 类=癵lyphicon  glyphicon-search"祝辞& lt;/span> 　　——比; 　　& lt; div 类=癷con  icon-small"祝辞& lt;/div>

<强>为什么一个页面的或者多个页面的背景图片,都集成到一张图片里吗?

我们访问网站的时候,会对服务器发出HTTP请求,网站打开的快慢,处理与页面的大小图片大小网速等多方面的因素外,还有个重要的因素就是HTTP的请求数.北京的请求数越多,网站打开的速度当然就会越慢,对服务器发出一个HTTP请求,对页面打开速度造成的延时大概是0.01秒,一个连接,一个图片都会对发出一个请求,如果HTTP请求过的多,就会造成页面大量的延时,访问速度自然就慢了。

如果把所有的背景图,都集成到一个图片里,这样就只会对服务器发出一个HTTP请求,请求数就会大量减少,延时就小了,然后采用CSS的背景图像和背景位置属性来实现所需的背景图并定位,达到页面所需要的表达效果。

CSS的基本语法是什么

CSS的基本语法是:1,CSS规则由选择器和一条或多条声明两个部分构成;2,选择器通常是需要改变样式的HTML元素;3,每条声明由一个属性和一个值组成;4,属性和属性值被冒号分隔开。

关于“CSS从png里截取小图标的方法”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看的到。

css从png里截取小图标的方法