css如何从png里截取小图标
导读:收集整理的这篇文章主要介绍了css如何从png里截取小图标,觉得挺不错的,现在分享给大家,也给大家做个参考。css从png里截取小图标的方法:首先使用background属性引入png图片,使用no-rePEat属性值设置图片不重复;然后使...
收集整理的这篇文章主要介绍了css如何从png里截取小图标,觉得挺不错的,现在分享给大家,也给大家做个参考。css从png里截取小图标的方法:首先使用background属性引入png图片,使用no-rePEat属性值设置图片不重复;然后使用background-posITion属性设置图像初始位置,进行精确定位。
本教程操作环境:windows7系统、CSS3& & HTML5版、Dell G3电脑。
css文件
.icon{ background: url(icon.png) no-repeat; /*url为png图片的路径*/ /*width和line-height分别对应每个小图标的宽和高*/ width: 20px; line-height: :20px; display: inline-block; } .icon-small{ /*png图片左上角为原点,往右往下均为负值*/ background-position: -150px 0px; /*对应小图标的坐标*/}
html文件
!-- 联想一下Bootstrap 字体图标(Glyphicons) span class="glyphicon glyphicon-seArch"> /span> --> div class="icon icon-small"> /div>
为什么一个页面的或者多个页面的背景图片,都集成到一张图片里?
我们访问网站的时候,会对服务器发出HTTP请求,网站打开的快慢,处理与页面的大小图片大小网速等多方面的因素外,还有个重要的因素就是HTTP 的请求数。HTTP的请求数越多,网站打开的速度当然就会越慢,对服务器发出一个HTTP请求,对页面打开速度造成的延时大概是0.01秒,一个连接,一个图片都会对发出一个请求,如果HTTP请求过多,就会造成页面大量的延时,访问速度自然就慢了。
如果把所有的背景图,都集成到一个图片里,这样就只会对服务器发出一个HTTP请求,请求数就会大量减少,延时就小了。然后采用CSS 的 background-image 和 background-position 属性来实现所需的背景图并定位,达到页面所需要的表达效果。
推荐学习:css视频教程
以上就是css如何从png里截取小图标的详细内容,更多请关注其它相关文章!
声明:本文内容由网友自发贡献,本站不承担相应法律责任。对本内容有异议或投诉,请联系2913721942#qq.com核实处理,我们将尽快回复您,谢谢合作!
若转载请注明出处: css如何从png里截取小图标
本文地址: https://pptw.com/jishu/589300.html