注意点：

　　概念：图片整合技术（ css sprite 或 精灵图）。通过将多个图片融合到一张图片，然后通过CSS background 背景定位技术技巧布局网页背景

　　优势：减少 http iis 请求数，减少对服务器的请求次数，提高页面加载虽度，从而隐形提升网站性能。同时也减少图片文件数目。

　

示例：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <meta name="viewport" content="width=device-width, initial-scale=1.0">

     <meta http-equiv="X-UA-Compatible" content="ie=edge">

     <title>Document</title>

     <style type="text/css">

         * {margin: 0; padding: 0;}

         .question {width: 50px; height: 200px; margin: 0 auto;}

             .question li {list-style: none; float: top;}

                 .question li a {display: block; width: 50px; height: 40px; background: url(img/spriteImg.png); }

                     #q2 a {background-position: 0 -50px;}

                     #q3 a {background-position: 0 -100px;}

                     #q4 a {background-position: 0 -150px;}

                     #q1 a:hover {background-position: -50px 0;}

                     #q2 a:hover {background-position: -50px -50px;}

                     #q3 a:hover {background-position: -50px -100px;}

                     #q4 a:hover {background-position: -50px -150px;}

     </style>

 </head>

 <body>

     <ul class="question">

         <li id="q1"><a href="#"></a></li>

         <li id="q2"><a href="#"></a></li>

         <li id="q3"><a href="#"></a></li>

         <li id="q4"><a href="#"></a></li>

     </ul>

 </body>

 </html>

结果：

CSS-图片整合笔记的更多相关文章

  1. 7：CSS Sprites的原理（图片整合技术）

    7:CSS Sprites的原理(图片整合技术) 一.将导航背景图片,按钮背景图片等有规则的合并成一张背景图,即将多张图片合为一张整图,然后用background-position”来实现背景图片的定 ...

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

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

  3. CSS揭秘读书笔记 （一）

    CSS揭秘读书笔记      (一) 一.半透明边框 要想实现半透明边框可以使用border: border: 10px  solid  hsla(0,0%,100%,.5); background: ...

  4. 【CSS sprites （CSS图片精灵） 详解】

    本文包含 CSS sprites 简介.原理.适用在哪些类型的网页制作中.背景图片的 position 值如何确定以及制作 sprites 的技巧. [CSS sprites 简介] CSS Spri ...

  5. css的学习笔记

    CSS3有哪些新特性? 1. CSS3实现圆角(border-radius),阴影(box-shadow), 2. 对文字加特效(text-shadow.),线性渐变(gradient),旋转(tra ...

  6. 《CSS揭秘》笔记（一）

    前言 我们在现代 CSS 中所面临的挑战已经不在于如何绕过这些转瞬即逝的浏览器 bug.如今的挑战是,在保证 DRY ① .可维护.灵活性.轻量级并且尽可能符合标准的前提下,把我们手中的这些CSS特性 ...

  7. css随堂笔记（三）

    Css随堂笔记(三) 1 关于背景图片   A 设置背景图片:background-image:url(“图片的路径”):   B 背景图片位置: background-position:1 方位名词 ...

  8. （2）《Head First HTML与CSS》学习笔记---img与基于标准的HTML5

    1.浏览器处理图像的过程: 1.服务器获取文件,显示出文本结构,以及预留默认的大小给<img>(如果该<img>有width-1值和height-1值,则根据这个值提前设好页面 ...

  9. 《CSS世界》笔记二：盒模型四大家族

    上一篇:<CSS世界>笔记一:流/元素/尺寸下一篇:<CSS世界>笔记三:内联元素与对齐 写在前面 在读<CSS世界>第四章之前,粗浅的认为盒模型无非是margin ...

随机推荐

  1. PHP系列 | PHPexcel导入xls格式 ，提示错误：iconv(): Wrong charset, conversion from `CP936' to `UTF-8' is not allowed

    导入xls格式(2003版本)时会报错提示错误信息 iconv(): Wrong charset, conversion from `CP936' to `UTF-8' is not allowed[ ...

  2. C#-关于TcpListener的AcceptTcpClient()方法造成线程阻塞，进而程序无法彻底关闭的问题

    https://blog.csdn.net/nuistchn/article/details/50809158 在<C#高级编程>第7版第24章,有提到使用TCP类. 书中写了一个实例,两 ...

  3. 福昕PDF高级企业版编辑器9.5 Foxit PhantomPDF Business安装破解教程

    title: "福昕PDF高级企业版编辑器9.5 Foxit PhantomPDF Business安装破解教程" categories: soft tags: soft auth ...

  4. 考勤打卡机导出的excel考勤时间表如何生成实用的考勤表

    该excel表有如下结构 姓名\日期 周1 周2 周3 周4 周5 张三 7:3518:02 7:3518:02 7:46   17:56 李四 7:3518:02 7:02 18:00 18:02 ...

  5. layui中的table中toolbar自定义过程

    自己挖过的坑需要自己来填. layui的table默认表头工具栏右边有3个操作,分别是过滤字段.导出excel.打印功能. 在js中代码添加toolbar即可实现上面的效果: table.render ...

  6. IDEA 使用SequenceDiagram插件绘制时序图

    最近看代码,由于代码的调用层级深度比较多,层层深入到某处时,已经忘记了身处何处,虽然自己可以使用一些画图工具来时序图,但是,这种情况下,自己画时序图很繁琐,比较浪费时间,上网找了一下IDEA有一个插件 ...

  7. linux下 tab键失效 -bash: !ref: 为绑定变量

    报错现象: Linux环境下,按Tab键进行补全时出现上图情况. [root@worker2 cjj]# vim /et-bash: !ref: 为绑定变量 -bash: !ref: 为绑定变量 -b ...

  8. CVI中调用VC动态库

    1.在VC环境中建立新工程,创建32位动态库(Win32 Dynamic-Link Library)  -> A simple DLL project 2.在工程中可加入别的动态库,在工程菜单中 ...

  9. postgrelsql base64加密，JS base64解密

    项目中做云桌面对接,需要在项目中查出用户的明文密码,拼接到云桌面登陆地址中,防止明文传输,做了base64加密解密,防止小白黑客盗取用户密码. postgrelsql base64加密SQL语句: 查 ...

  10. 爬虫笔记之teambition登录验证码

    一.缘起 想做的事情太多,计划乱糟糟,想找个工具理一下,想起来了的很久之前用过teambition,打算看一下,然后在登录界面看到一个比较有意思的验证码: 这种倒是比较有意思哈,看着像是模仿12306 ...