CSS Sprite（雪碧圖）簡單使用

時間 2019-11-10

標籤 css sprite 雪碧簡單使用欄目 CSS 简体版

原文原文鏈接

CSS Sprite，咱們通常叫他雪碧圖或精靈圖，它是一種圖像拼合技術。該方法是將小圖標和背景圖像合併到一張圖片上，而後利用css的背景定位來顯示須要顯示的圖片部分。css

雪碧圖的使用有如下幾個優勢html

減小圖片的字節。
減小網頁的http請求，從而大大的提升頁面的性能。
解決了網頁設計師在圖片命名上的困擾，只需對一張集合的圖片上命名就能夠了，不須要對每個小元素進行命名，從而提升了網頁的製做效率。
更換風格方便，只須要在一張或少張圖片上修改圖片的顏色或樣式，整個網頁的風格就能夠改變。維護起來更加方便。

雪碧圖的合成能夠在這進行拼合：https://www.toptal.com/developers/css/sprite-generator。至於用法我就不教了佈局

語法：background-position:npx npx;
（第一個值是調左右的，當你須要將背景圖向右調的時候用正值，向左則爲負值同理將背景圖上下調動的時候上是用負值，下是正值）性能

簡單上個小案例學習

雪碧圖flex

代碼：ui

<!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>
    .logo{
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
    }
    .bg{
    margin-left: 20px;    
    width: 100px;
    height: 100px;
    background-image: url(css_sprites.png);
    }
    .logo1{
   
    background-position: -25px -20px;
    }
    .logo2{
   
   background-position: -466px -20px;
   }
   .logo3{
   
   background-position: -466px -168px;
   }
   .logo4{
   
   background-position: -914px -313px;
   }
   .logo5{
   
   background-position: -616px -313px;
   }
    </style>
</head>
<body>
    
    <div class="logo">
        <div class="bg logo1"></div>
        <div class="bg logo2"></div>
        <div class="bg logo3"></div>
        <div class="bg logo4"></div>
        <div class="bg logo5"></div>
    </div>
</body>
</html>

效果url

樣式中flex如有不一樣，可看我《Flex佈局學習（一）》這篇筆記spa

1. CSS Sprite雪碧圖
2. css Sprite雪碧圖
3. css sprite 雪碧圖
4. CSS Sprite雪碧圖應用
5. CSS Sprite——CSS雪碧圖
6. Sprite - 雪碧圖
7. 使用Vue + 雪碧圖（CSS sprite），webpack-spritesmith
8. 教你來使用雪碧圖（CSS sprite）
9. CSS Sprite 雪碧圖製做
10. 關於css雪碧圖sprite
更多相關文章...
• 使用 CSS 顯示 XML - XML 教程
• MySQL視圖簡介 - MySQL教程
• Git可視化極簡易教程 — Git GUI使用方法
• Composer 安裝與使用

相關標籤/搜索

每日一句

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