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

創(chuàng)新互聯(lián)專注于企業(yè)成都全網(wǎng)營銷推廣、網(wǎng)站重做改版、田陽網(wǎng)站定制設計、自適應品牌網(wǎng)站建設、H5響應式網(wǎng)站、商城網(wǎng)站定制開發(fā)、集團公司官網(wǎng)建設、成都外貿(mào)網(wǎng)站建設、高端網(wǎng)站制作、響應式網(wǎng)頁設計等建站業(yè)務，價格優(yōu)惠性價比高，為田陽等各大城市提供網(wǎng)站開發(fā)制作服務。

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

好處

1. 降低服務器壓力。

2. 減少網(wǎng)絡請求，頁面渲染更快。

缺點

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

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

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>

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

雪碧圖使用場景

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

到此，關于“如何用css制作雪碧圖”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續(xù)學習更多相關知識，請繼續(xù)關注創(chuàng)新互聯(lián)-成都網(wǎng)站建設公司網(wǎng)站，小編會繼續(xù)努力為大家?guī)砀鄬嵱玫奈恼拢?/p>

文章題目：如何用css制作雪碧圖-創(chuàng)新互聯(lián)
網(wǎng)站地址：http://www.aaarwkj.com/article44/ccdphe.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供品牌網(wǎng)站建設、企業(yè)網(wǎng)站制作、服務器托管、ChatGPT、網(wǎng)站改版、商城網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉載內(nèi)容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)