css sprite

更新日期: 2018-12-13阅读量: 1415标签: 背景

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


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


三.代码

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


站长推荐

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

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

css sprites(精灵图)如何使用?

CSS Sprites是一种性能优化技术,一种网页图片应用处理方式:将多个图像组合成单个图像文件以在网站上使用的方法,以提高性能;也被称为css 精灵图。

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

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

HTML5实现首页动态视频背景

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

css条纹背景样式、及方格斜纹背景的实现

通过CSS中的linear-gradient主要就能显示出不同方向的条纹效果,这里我们就来详解CSS制作Web页面条纹背景样式的技巧,需要的朋友可以参考下

CSS背景图片的6个有趣的技巧

背景图像可能是所有前端开发人员在我们的职业生涯中至少使用过几次的CSS属性之一。大多数人认为背景图片没有什么不寻常的,但是。。。。。。

CSS背景background

背景颜色background-color取值:合法的颜色值和transparent,注:背景颜色和背景图片,填充都是从边框开始;background-posion:x y,设定的值都是相对于浏览器,不是相对于容器,将背景图固定在网页某个位置,一直处于可视区域中

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

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

10 个独特的 CSS 背景视觉效果

这几年的web设计中,大背景的设计变得越来越流行。特别是在现在大屏大行其道的情况下,设计师在设计中越来越多的使用大分辨率的背景图来填充屏幕,这样更能制造独特的视觉效果,能更好的传达他们想要向用户传达的内容。

css设置全屏背景图,background-size 属性

在写主题样式的时候经常会碰到用背景图铺满整个背景的需求,这里分享下使用方法,以图片bg.jpg为例,最简单,最高效的方法 CSS3.0 归功于css3.0新增的一个属性background-size

CSS3做出条纹大背景

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

点击更多...

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