admin 管理员组

文章数量: 1184232

CSS从一个png图片里取出(截取)里面的小图标

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从一个png图片里取出(截取)里面的小图标

版权声明：本文标题：CSS从一个png图片里取出(截取)里面的小图标 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://www.roclinux.cn/b/1693765188a241522.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。