这篇文章将为大家详细讲解有关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的基本语法是：1、css规则由选择器和一条或多条声明两个部分构成；2、选择器通常是需要改变样式的HTML元素；3、每条声明由一个属性和一个值组成；4、属性和属性值被冒号分隔开。
关于“css从png里截取小图标的方法”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
