CSS-sprit 雪碧图

 可以将 多个小图片统一保存到一个大图片中,然后通过调整background-position来显示响应的图片
       这样图片会同时加载到网页中 就可以避免出现闪烁的问题
       这个技术在网页中应用十分广泛,被称为css-sprite ,也成为雪碧图

雪碧图的特点:
         一次性将多个图片加载进页面,降低请求次数,加快访问速度,提升用户的体验
         局限只适用于背景图片 不适用于GIF

通过改变background-position的值,来从css-sprit中选择所需的图片进行加载,即清除了首次加载白闪烁的现象,也压缩了内存,提升了用户体验。

 雪碧图的使用步骤:
       1、先确定要使用的图标
       2、测量图标的大小
       3、根据测量的结果创建一个元素
       4、将雪碧图设置为元素的背景图片
       5、设置一个偏移量以显示正确的图片
 1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta http-equiv="X-UA-Compatible" content="IE=edge">
6 <meta name="viewport" content="width=device-width, initial-scale=1.0">
7 <title>Document</title>
8 <style>
9 a:link{
10 display: block;
11 width: 100px;
12 height: 100px;
13 background-image: url(../img/bg.png);
14 }
15 a:hover{
16 background-color: aquamarine;
17 }
18 .box1{
19 width: 290px;
20 height: 100px;
21 background-image: url(../img/w3cschool.png);
22 background-position: 0 -150px;
23 }
24 .box2{
25 width: 130px;
26 height: 45px;
27 background-image: url(../img/w3cschool.png);
28 background-position: -380px -52px;
29
30 }
31
49 </style>
50 </head>
51 <body>
52 <div class="box1"></div>
53 <div class="box2"></div>
54 <a href="javascript:;"></a>
55
56 </body>
57 </html>

效果图

CSS-sprit 雪碧图的更多相关文章

  1. CSS Sprite 雪碧图制作

    CSS Sprite 雪碧图,简单来说就是: 为了提高网页的性能,减少加载次数,将一些不会经常随网站内容变化的小图标,集中放在一张大图上,将该图应作为background-image 嵌入页面中,在需 ...

  2. CSS Sprite雪碧图

    为了减少http请求数量,加速网页内容显示,很多网站的导航栏图标.登录框图片等,使用的并不是<image>标签,而是CSS Sprite雪碧图. 两个小例子: 淘宝首页的侧栏图 代码 &l ...

  3. CSS Sprites的原理(图片整合技术)(CSS精灵)/雪碧图

    CSS Sprites的原理(图片整合技术)(CSS精灵)/雪碧图   一.将导航背景图片,按钮背景图片等有规则的合并成一张背景图,即将多张图片合为一张整图,然后用background-positio ...

  4. CSS Sprite雪碧图应用

    在写网页过程中,会遇到这种需要使用多个小图标: 如上图中的「女装」文字左边的图标.容易想到的解决方法是为每张图片加入<img>标签,但这样做会增加HTTP请求数量,影响网站加载速度.比这更 ...

  5. CSS Sprites ——雪碧图的使用方法

    首先解释下CSS Sprites是什么:有称CSS精灵,有称CSS雪碧的,无论叫什么,他的作用就是把网页上很多小图标放到一张图片里面,然后通过CSS里面的background-position来控制每 ...

  6. css背景雪碧图等

    1.背景图 雪碧图技术 要设置背景,是要设置在某个盒子上 <!doctype html> <html lang="en"> <head> < ...

  7. css sprite 雪碧图

    使用雪碧图的目的:有时为了美观,我们会使用一张图片来代替一些小图标,但是一个网页可能有很多很多的小图标,浏览器在显示页面的时候,就需要像服务器发送很多次访问请求, 这样一来,一是造成资源浪费,二是会导 ...

  8. CSS Sprite雪碧图的应用

    CSS雪碧图,即CSS Sprite,也有人叫它CSS精灵图,是一种图像拼合技术.该方法是将多个小图标和背景图像合并到一张图片上,然后利用CSS的背景定位来显示需要显示的图片部分. 雪碧图的使用场景 ...

  9. 【HTML+CSS】(2)CSS Sprite雪碧图

    1. 雪碧图的使用场景 (1). 静态图片.不随用户信息的变化而变化 (2). 小图片.图片容量比較小 (3). 载入量比較大 一些大图不建议拼成雪碧图,比如淘宝站点的导航图片都是使用的雪碧图. 2. ...

  10. 为什么css定位雪碧图(合成图)都要以负号开头?

    (1)正常来说 定位坐标是以 合成图片 左上角这个点作为原点(0px,0px)开始读取的, 而你的图片全都在坐标系的 第四象限 background-position: x y:(x,y为数值或百分比 ...

随机推荐

  1. SharkCTF2021 easy_phpserialize题记

    ***先说教训: (1)不要看到正则就走不动路:有些正则不一定能绕. (2)__wakeup()漏洞在php5.6以上就被修复了: 本地复现各种题目时要注意环境. -------- 扫描,得到inde ...

  2. 如何接入 K8s 持久化存储?K8s CSI 实现机制浅析

    作者 王成,腾讯云研发工程师,Kubernetes contributor,从事数据库产品容器化.资源管控等工作,关注 Kubernetes.Go.云原生领域. 概述 进入 K8s 的世界,会发现有很 ...

  3. 我们一起来回顾一下Synchronized关键字吧

    多线程一直Java开发中的难点,也是面试中的常客,趁着还有时间,打算巩固一下JUC方面知识,我想机会随处可见,但始终都是留给有准备的人的,希望我们都能加油!!! 沉下去,再浮上来,我想我们会变的不一样 ...

  4. MySQL:基础语法-3

    MySQL:基础语法-3 记录一下 MySQL 基础的一些语法,便于查询,该部分内容主要是参考:bilibili 上 黑马程序员 的课程而做的笔记,由于时间有点久了,课程地址忘记了 上文MySQL:基 ...

  5. 搬运2:早期写的探究printf

    目录: 1. 关于printf格式化输出 2. printf的一般形式 3. 转换说明 4. 格式化输出的意义 5. 转换说明修饰符 6. 修饰符中的标记 7. printf的返回值 ps:共3250 ...

  6. 深入理解xLua基于IL代码注入的热更新原理

    目前大部分手游都会采用热更新来解决应用商店审核周期长,无法满足快节奏迭代的问题.另外热更新能够有效降低版本升级所需的资源大小,节省玩家的时间和流量,这也使其成为移动游戏的主流更新方式之一. 热更新可以 ...

  7. Github点赞超多的Spring Boot学习教程+实战项目推荐!

    Github点赞接近 100k 的Spring Boot学习教程+实战项目推荐!   很明显的一个现象,除了一些老项目,现在 Java 后端项目基本都是基于 Spring Boot 进行开发,毕竟它这 ...

  8. linux下uptime命令

    https://man.linuxde.net/uptime uptime命令能够打印系统总共运行了多长时间和系统的平均负载.uptime命令可以显示的信息显示依次为:现在时间.系统已经运行了多长时间 ...

  9. hdu 2586 How far away? (LCA模板)

    题意: N个点,形成一棵树,边有长度. M个询问,每个询问(a,b),询问a和b的距离 思路: 模板题,看代码.DFS预处理算出每个结点离根结点的距离. 注意: qhead[maxn],而不是qhea ...

  10. 议题解析与复现--《Java内存攻击技术漫谈》(二)无文件落地Agent型内存马

    无文件落地Agent型内存马植入 可行性分析 使用jsp写入或者代码执行漏洞,如反序列化等,不需要上传agent Java 动态调试技术原理及实践 - 美团技术团队 (meituan.com) 首先, ...