CSS-图片整合笔记

注意点：

　　概念：图片整合技术（ 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-图片整合笔记

最新文章

热门文章