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. 破解安装pyhotn

    1.网址 https://www.jetbrains.com/pycharm/download/#section=windows,打开页面,点击下载专业版 2.这是下载好的文件,双击运行即可. //详 ...

  2. 前端HTML元素的类型名称

    <div id="content" class="para" style="width:800px;"> <p>He ...

  3. Less-25 preg_replace2

    Less-25: 核心语句: 各种回显也均有. 通过blacklist,我们可以发现,本题屏蔽了and和or. preg_replace函数中正则表达式后面的i是一个修饰符,代表正则匹配时不区分大小写 ...

  4. 【UE4 C++ 基础知识】<3> 基本数据类型、字符串处理及转换

    基本数据类型 TCHAR TCHAR就是UE4通过对char和wchar_t的封装 char ANSI编码 wchar_t 宽字符的Unicode编码 使用 TEXT() 宏包裹作为字面值 TCHAR ...

  5. Django+Vue跨域配置与经验

    一.原理 同源?同源策略? 同源的定义是:两个页面的协议.端口和域名都相同 同源的例子: 不同源的例子: 同源策略SOP(Same origin policy)是一种浏览器约定,它是浏览器最核心也最基 ...

  6. 零基础学习Linux所必备的七大习惯

    对于很多Linux初学者来说,在刚开始使用linux系统时会感到很多的不适.这里为大家整理了自己以前linux入门时别人告诉我的七个习惯.我相信如果你运用了这七个习惯,在你使用Linux时你会感觉更安 ...

  7. ArrayList集合底层原理

    目录 ArrayList集合特点及源码分析 ArrayList源码分析 成员变量 构造函数 增加方法 add(E e)方法 add(int index, E element)方法 删除方法 remov ...

  8. cf20B Equation（认真仔细题）

    题意: 求AX^2+BX+C=0的根 思路: 考虑到A,B,C所有可能的情况 代码: double a,b,c; int main(){ cin>>a>>b>>c; ...

  9. 【接口】SpringBoot+接口开发(一)

    一.接口的简单介绍 1.什么是接口:接口及服务: 2.接口的分类:(1)系统的内部接口;(2)第三方的外部接口; 3.简述接口原理图: 4.接口协议:是指客户端跟服务器之间或者接口与接口间进行的通讯时 ...

  10. mysql登录遇到ERROR 1045 (28000): Access denied for user 'root'@'localhost' (using password: NO)

    执行mysql  -uroot  -p,出现如下问题 ERROR 1045 (28000): Access denied for user 'root'@'localhost' (using pass ...