css sprite

时间: 2018-12-13阅读: 1192标签: 背景

一.需求:提高首评加载速度,除了要将所有使用的图片,资源文件压缩,添加懒加载,还需要合并页面中使用到的所有图标到一张大图里,减少请求次数


二.实现:所有图标放到一张大图上,使用background定位获取到要显示的图标并控制元素的宽高即可


三.代码

.logo{
  background:url(‘../../imgs/sprite.png‘) no-repeat;
  background-position:10px 10px;
  width:30px;
  height:30px;
}


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

链接: http://www.fly63.com/article/detial/1578

CSS3背景 background-size

设置背景图片的大小,以长度值或百分比显示,还可以通过cover和contain来对图片进行伸缩。auto:默认值,不改变背景图片的原始高度和宽度;contain:容纳,即将背景图片等比缩放至某一边紧贴容器边缘为止。

CSS3制作文字背景图

文字带上渐变色,或者说让文字透出图片。这些效果 CSS 属性也可以完成。 使用 mix-blend-mode 能够轻易实现,我们只需要构造出黑色文字,白色底色的文字 div ,叠加上图片,再运用 mix-blend-mode 即可,简单原理如下:

HTML5实现首页动态视频背景

你想实现动态视频作为背景的首页吗?来,一起来学习,本文将带你一起实现H5动态视频背景;首先网上找一段清晰的视频下载下来,最好是MP4格式的;

css3新增的背景属性有哪些?

在 CSS3 之前,背景图片的尺寸是由图片的实际尺寸决定的。在 CSS3 中,可以规定背景图片的尺寸,这就允许我们在不同的环境中重复使用背景图片。您能够以像素或百分比规定尺寸。如果以百分比规定尺寸

详解如何给背景图片加颜色遮罩

前段时间在开发中,遇到需要给背景层加颜色遮罩的项目,现在特定总结一下给背景图层加颜色遮罩的方法。方法一:通过定位叠加(注意层级)

background背景相关之背景颜色

css背景缩写属性可以在一个声明中设置所有的背景属性,css背景图像支持引入多个图像.主要属性有:background-color,background-image,background-repeat

如何使用CSS Paint API动态创建与分辨率无关的可变背景

现代Web应用对图像的需求量很大,它们占据网络下载的大部分字节。通过优化它们,你可以更好地利用它们的性能。如果你碰巧使用几何图形作为背景图像,有一个替代方案

CSS3做出条纹大背景

实现不等宽背景条纹;实现不等宽背景条纹;草地背景;斜条纹背景;单色斜条纹背景(利用透明度及transparent);格子衫背景;波点背景;棋盘背景

Flutter设置背景图片

在我们平时的开发中会经常使用到背景图片,下面我这介绍的是Container通过BoxDecoration来设置的;Scaffold路由页面的骨架,我们在里面可以拼装出一个完整的路由页面

background 设置文本框背景图

background 属性的作用是给元素设置背景,它是一个复合属性,常用的子属性如下:background-color 指定元素的背景颜色。background-image 指定元素的背景图像。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!