css如何从png里截取小图标

css从png里截取小图标的方法：首先使用background属性引入 png图片 ，使用no-re PE at属性值设置 图片不重复 ；然后使用background-pos IT ion属性设置图像初始位置，进行精确定位。

@H_ 360 _3@

本教程操作环境：windows7系统、CSS3 && HT ML 5版、Dell G3 电 脑。

css文件

.icon
{
    background: url(icon.png) no-repeat; /*url为png图片的路径*/
    /*width和line-h ei ght分别对应每个小图标的 宽 和高*/
    width: 20px;    
    line-height: :20px;
    dis play : inline-block;
}
.icon -s mall
{   /*png图片左上角为原点,往右往下均为负值*/
    background-position: -150px 0px;/*对应小图标的坐标*/
}

html文件

<!-- 联想一下Bootstrap 字体图标(Glyphicons) 
    <span class="glyphicon glyphicon-se Arch "></span>
-->
<div class="icon icon-small"></div>

为什么一个页面的 或者 多个页面的背景图片，都集成到一张图片里?

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

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

推荐学习：css视频教程

以上就是css如何从png里截取小图标的详细内容，更多请关注其它相关 文章 ！

总结

以上是 为你收集整理的 css如何从png里截取小图标 全部内容，希望文章能够帮你解决 css如何从png里截取小图标 所遇到的问题。

如果觉得 网站内容还不错， 推荐好友。

查看更多关于css如何从png里截取小图标的详细内容...