如何用css制作雪碧圖

這篇文章主要介紹“如何用css制作雪碧圖”，在日常操作中，相信很多人在如何用css制作雪碧圖問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”如何用css制作雪碧圖”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

這道題實際上考的是前端性能優(yōu)化的一個點。雪碧圖的英文是CSS Sprites。其目的是將多張比較小的圖片，合并到一張大的圖片上面，大的圖片背景透明，使用的時候，通過把該張圖片當做背景圖片，通過不同的 background-position定位來展示的那部分圖片。

好處

1. 降低服務器壓力。

2. 減少網絡請求，頁面渲染更快。

缺點

1. 后期維護困難，添加一張圖片需要重新制作。

2. 應用麻煩，每一張圖都需要計算位置，通過調整位置來展示圖片，對誤差的要求很嚴格。

3. 使用圖片有局限，只能用在背景圖片background-image上，不能用<img>標簽來使用。

制作雪碧圖

只需要將自己想要的圖片上傳上去，就可以生成右邊的雪碧圖了，下載圖片，就可以引用了，可以直接復制坐標的css代碼來引用圖片。下面貼一個完整的例子：

<template>
  <div>
    <h2>css雪碧圖演示</h2>
    <ul>
      <li v-for="item in moodList" :key="item" :class="item"></li>
    </ul>
  </div>
</template>

<script>
    export default {
        name: "cssSprites",
        components: {},
        data() {
            return {
              moodList: ['bg-mood_afraid', 'bg-mood_angry', 'bg-mood_calm', 'bg-mood_expect', 'bg-mood_happy', 'bg-mood_miss','bg-mood_nervous', 'bg-mood_sad', 'bg-mood_surprised']
            }
        },
        methods: {

        },
        computed: {},
        created: function () {}
    }
</script>

<style>
  .cssSprites{
    li {
      display: inline-block;
    }
    .bg-mood_afraid {
      width: 176px; height: 176px;
      background: url('../assets/img/css_sprites.png') -10px -10px;
    }
    .bg-mood_angry {
      width: 176px;
      height: 176px;
      background: url('../assets/img/css_sprites.png') -206px -10px;
    }
    .bg-mood_calm {
      width: 176px; height: 176px;
      background: url('../assets/img/css_sprites.png') -10px -206px;
    }
    .bg-mood_expect {
      width: 176px; height: 176px;
      background: url('../assets/img/css_sprites.png') -206px -206px;
    }
    .bg-mood_happy {
      width: 176px; height: 176px;
      background: url('../assets/img/css_sprites.png') -402px -10px;
    }
    .bg-mood_miss {
      width: 176px; height: 176px;
      background: url('../assets/img/css_sprites.png') -402px -206px;
    }
    .bg-mood_nervous {
      width: 176px; height: 176px;
      background: url('../assets/img/css_sprites.png') -10px -402px;
    }
    .bg-mood_sad {
      width: 176px; height: 176px;
      background: url('../assets/img/css_sprites.png') -206px -402px;
    }
    .bg-mood_surprised {
      width: 176px; height: 176px;
      background: url('../assets/img/css_sprites.png') -402px -402px;
    }
  }
</style>

可以看到整個就引用了一張背景圖片，減少了網絡請求，但一定程度上增加了客戶端內存消耗，通過background-position來設置圖片的位置，達到顯示想要的部分背景圖的目的。

雪碧圖使用場景

主用在網站的icon上面，很多網站都有很多小圖標，這些小圖標如果都是單獨請求網絡，務必會消耗很多玩網絡資源（每次請求都會有一個連接與斷開的時間消耗），但是比較大的圖片，就不建議用雪碧圖，因為圖片太大，一次請求獲取的數據量大，拿到這個大圖需要的時間就長，降低了網頁的整體體驗。

到此，關于“如何用css制作雪碧圖”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續(xù)學習更多相關知識，請繼續(xù)關注億速云網站，小編會繼續(xù)努力為大家?guī)砀鄬嵱玫奈恼拢?/p>