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] 使用css写一个垂直翻转图片的效果
[css] 使用css写一个垂直翻转图片的效果 transform: rotateX(180deg); /* 垂直镜像翻转 */ 个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持 ...
写一个函数取出php,写一个函数,尽可能高效的,从一个标准 url 里取出文件的扩展名...
写一个函数,尽可能高效的,从一个标准 url 里取出文件的扩展名例如: http://www.sina.com.cn/abc/de/fg.php?id=1 需要取出 php 或 .php 直接先上方 ...
Hexo博客Next6.0版本主题配置（背景图片加载、侧边栏社交小图标设置、设置网站图标）
随机背景图片加载原理自动更换背景是修改添加背景的css样式实现图片来源 https://source.unsplash.com/ 修改背景样式修改themes\next\source\css\ ...
写一个函数，尽可能高效的，从一个标准 url 里取出文件的扩展名
例如: http://www.sina.com.cn/abc/de/fg.php?id=1 需要取出 php 或 .php function getExt($url){$arr=parse_url($ ...
一个经典帖子里的 21 个经典小故事受益匪浅
1.甲去买烟,烟29元,但他没火柴,跟店员说:"顺便送一盒火柴吧."店员没给. 乙去买烟,烟29元,他也没火柴,跟店员说:"便宜一毛吧."最后,他用这一毛买一盒 ...
CSS 网站小图标雪碧图
https://www.jianshu.com/p/7482dde882af 网站开发90%会用到小图标, 多小图标调用显示是前端开发常见的问题:目前小图标显示常见有两种方式(其他方式欢迎补充):1. ...
css 剪辑图片_css如何截取图片？
CSS中有一个属性叫做clip,为修剪,剪裁之意.配合其属性关键字rect可以实现元素的矩形裁剪效果.使用此属性即可截取图片. css使用clip属性裁剪图片: img { position:abso ...
【4003】通过html+css做一个图片列表的静态页面。
[4003]通过html+css做一个图片列表的静态页面. 学习目标: [ 1]学习前端第三天掌握 html与css(基础选择器,有.无序列表相关)入门知识,梳理今天的学习知识点: [ 2]通过已学知 ...
像素钱包：一个可以把比特现金藏在图片里的APP
自从五月份BCH网络升级以来,涌现出很多BCH应用.这周有一个很独特的轻客户端应用发布,用户可以用它来发送包含BCH资金的图片. 像素钱包测试版在主网上发布比特现金SPV客户端Pixel Walle ...

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

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

最新文章

热门文章