web前端sprite，精靈圖，雪碧圖

時間 2020-02-15

標籤 web 前端 sprite 精靈雪碧欄目 HTML 简体版

原文原文鏈接

css spritecss

俗稱：精靈圖，雪碧圖，指將整個頁面不一樣的圖片or圖標合併在一張圖上；
優勢：使用CSS Sprite 能夠減小網絡請求，提升網頁加載性能，不會出現網頁上端加載完畢下面還在加載中這一問題html

缺點：若是後期更改其中某一圖標，且其像素大小發生改變，須要從新對全部圖標進行定位網絡

精靈圖製做：app

photoshop選擇透明圖層，將須要的圖標和圖片放入性能

測試用圖：測試

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title></title>
 6         <style type="text/css">
 7             #box{
 8                 margin: 50px;;
 9             }
10                 
11             #box a{
12                 display: block;
13                 width: 74px;
14                 height: 20px;
15                 border: 1px solid #ccc;
16                 color: black;
17                 font-size: 12px;
18                 text-decoration: none;
19                 text-align: center;
20                 border-top: none;
21                 padding-top: 54px;
22                 background-image: url(icon.png);
23             }
24             #box #zone{
25                 border-top:1px solid #CCCCCC;
26                 background-position: -17px 4px;
27                 background-repeat: no-repeat;
28             }
29             #box #zone:hover{
30                 background-position: -17px -98px;
31             }
32             #box #mail{
33                 background-position: -12px -186px;
34                 background-repeat: no-repeat;
35             }
36             #box #mail:hover{
37                 background-position: -12px -286px;
38             }
39         </style>
40     </head>
41     <body>
42         <div id="box">
43             <a href="#" id="zone">空間</a>
44             <a href="#" id="mail">郵箱</a>
45         </div>
46 
47     </body>
48 </html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。