CSS Sprite雪碧圖

時間 2019-11-20

標籤 css sprite 雪碧欄目 CSS 简体版

原文原文鏈接

1、CSS Sprite雪碧圖使用場景

瀏覽器一般很快就能夠將文本顯示出來，但圖像每每會減慢頁面的加載速度。這一現象在移動端尤其明顯，爲了解決這個問題，能夠將多個圖像拼合成單個背景圖像（sprite），再經過CSS控制具體顯示圖像的哪一部分。css

CSS雪碧即CSS Sprite，也有稱之爲CSS精靈，是一種CSS圖像合併技術，該方法是將小圖標和背景圖像合併到一張圖片上面，而後利用CSS北京定位來顯示須要顯示的圖像部分。html

CSS雪碧圖使用場景windows

是靜態圖片，不隨着用戶信息的變換而變化；
小圖片，圖片容量比較小；（大圖不建議拼成雪碧圖）
加載量大的圖片；

2、CSS Sprite雪碧圖實現原理和方式

CSS Sprite的基本原理是將網站中須要用到的圖片整合到一張單獨的圖片中，從而減小網站的HTTP請求數量。該圖片使用CSS background 和background-position 屬性渲染，這就意味着標籤變得更加的複雜了，圖片是在CSS中定義而不是在HTML中使用圖像<img>標籤瀏覽器

注意：拼合背景圖的小圖（X，Y）座標爲負值。以圖片左上角的頂點爲原點座標，app

根本上來講，就是經過控制一個層可顯示區域範圍的大小，經過打開一個窗口，進行背景圖的滑動。工具

雪碧圖的實現方式：網站

一、PS自動拼圖二、使用 sprite 工具自動生成。url

（CSS sprite自動生成工具 —— CssGaga 是windows環境下快速生成雪碧圖的工具，而且能夠返回每一個小圖片的position代碼 https://www.99css.com/cssgaga/）spa

（雪碧圖製做專家V1.0 來製做css雪碧圖軟件下載地址:http://www.kittyapp.net/soft/CssSpritesMaker.rar）.net

3、CSS Sprite雪碧圖的應用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS Sprite</title>
    <style>
    ul{  list-style:none;}
    li h3{
        font-size: 14px;
        font-weight: 400;
    }
    h3{  margin:0; padding:0;}
    li{
        display:block;
        height:31px;
        line-height: 31px;
        overflow:hidden;
        border-bottom: 1px solid #dedede;
    }
    .cat{
        width: 150px;
        background: #f8f8f8;
        border: 1px solid #bbb;
    }
    </style>
</head>
<body>
    <div class="cat">
        <ul>
            <li class="box1">
                <h3>服飾內衣</h3>
                <i></i>
            </li>
            <li class="box2">
                <h3>鞋包配飾</h3>
                <i></i>
            </li>
            <li class="box3">
                <h3>戶外運動</h3>
                <i></i>
            </li>
            <li class="box4">
                <h3>珠寶手錶</h3>
                <i></i>
            </li>
            <li class="box5">
                <h3>手機數碼</h3>
                <i></i>
            </li>
            <li class="box6">
                <h3>家電辦公</h3>
                <i></i>
            </li>
            <li class="box7">
                <h3>護膚彩妝</h3>
                <i></i>
            </li>
            <li class="box8">
                <h3>母嬰用品</h3>
                <i></i>
            </li>
        </ul>
    </div>

    <!-- div>ul>li.box$*7>(h3{wwwww}+i) -->
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS Sprite</title>
    <style>
    ul{  list-style:none;}
    li h3{
        font-size: 14px;
        font-weight: 400;
    }
    h3{  margin:0; padding:0;}
    li{
        display:block;
        height:31px;
        line-height: 31px;
        overflow:hidden;
        border-bottom: 1px solid #dedede;
    }
    li i{
        background: url(j1.jpg);
        display:inline;
        width:30px;
        height:24px;
        float: left;
        margin:3px 10px 0 0;
    }
    .cat{
        width: 150px;
        background: #f8f8f8;
        border: 1px solid #bbb;
    }
    .box1 i{  background-position: 0 0;}
    .box2 i{  background-position: 0 -24px;}
    .box3 i{  background-position: 0 -48px;}
    .box4 i{  background-position: 0 -72px;}
    .box5 i{  background-position: 0 -96px;}
    .box6 i{  background-position: 0 -120px;}
    .box7 i{  background-position: 0 -144px;}
    .box8 i{  background-position: 0 -168px;}

    </style>
</head>
<body>
    <div class="cat">
        <ul>
            <li class="box1">
                <h3>服飾內衣</h3>
                <i></i>
            </li>
            <li class="box2">
                <h3>鞋包配飾</h3>
                <i></i>
            </li>
            <li class="box3">
                <h3>戶外運動</h3>
                <i></i>
            </li>
            <li class="box4">
                <h3>珠寶手錶</h3>
                <i></i>
            </li>
            <li class="box5">
                <h3>手機數碼</h3>
                <i></i>
            </li>
            <li class="box6">
                <h3>家電辦公</h3>
                <i></i>
            </li>
            <li class="box7">
                <h3>護膚彩妝</h3>
                <i></i>
            </li>
            <li class="box8">
                <h3>母嬰用品</h3>
                <i></i>
            </li>
        </ul>
    </div>
</body>
</html>

1. CSS Sprite雪碧圖
2. css Sprite雪碧圖
3. css sprite 雪碧圖
4. CSS Sprite——CSS雪碧圖
5. Sprite - 雪碧圖
6. CSS Sprite 雪碧圖製做
7. 關於css雪碧圖sprite
8. CSS Sprite雪碧圖應用
9. No.006 雪碧圖CSS Sprite
10. compass與css sprite（雪碧圖）
更多相關文章...
• jQuery Mobile CSS 類 - jQuery Mobile 教程
• CSS 指南 - 網站建設指南
• Git可視化極簡易教程 — Git GUI使用方法
• 使用阿里雲OSS+CDN部署前端頁面與加速靜態資源

相關標籤/搜索

每日一句

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