前端必備 CSS Sprites雪碧圖如何使用

CSS Sprites又稱css精靈或者諧音css雪碧,是一種網頁圖片應用處理方式,復雜的事情簡單化,提高開發效率。

CSS Sprites將一個頁面內所需要顯示的圖片全部整合到一張大圖中,并使用css屬性background進行調用。這樣的話,當頁面渲染時,可以減少請求次數,在一定程度上能夠加快網頁加載速度。

這并不是什么新鮮玩意了,但由于將小圖整合到一張大圖,又要準確的寫出所需小圖的background-position值,對于很多新手來說比較浪費時間,很多人只能放棄這個比較繁瑣的步驟。

background-position 屬性改變圖像在背景中的位置

基本用法

background-image:url('img_tree.png');
background-repeat:no-repeat;
background-position:right top;  // right 為正數 圖片向右移 為負數 圖片向左移  top同理

eg:

原始圖片:

.pause{
    width: 36px;
    height: 36px;
    background: url("https://upload-images.jianshu.io/upload_images/3100736-be3c0495c116dd76.png") no-repeat;
}
.stop{
    width: 36px;
    height: 36px;
    background: url("https://upload-images.jianshu.io/upload_images/3100736-be3c0495c116dd76.png") -36px 0px no-repeat;
}
.play{
    width:36px;
    height: 36px;
    background: url("https://upload-images.jianshu.io/upload_images/3100736-be3c0495c116dd76.png") -75px 0 no-repeat;
}

效果:

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • [摘要] CSS Sprites又稱css精靈或者諧音css雪碧,是一種網頁圖片應用處理方式,今天為大家分享一個一...
    神木驚蟄閱讀 17,688評論 0 17
  • [css sprite原理優缺點及使用] CSS Sprites在國內很多人叫css精靈,是一種網頁圖片應用處理方...
    LabRaDor2079閱讀 1,571評論 0 3
  • div css sprites精靈-CSS圖像拼合 CSS貼圖定位網頁背景素材圖片拼合定位布局技術教程篇與css ...
    JamHsiao_aaa4閱讀 548評論 0 1
  • 什么是icon?讓我們先來看一個例子:我們以簡書為例子,圖中看到的用圓圈起來的部分都是icon 這個時候你就想問了...
    一只小前端閱讀 9,116評論 0 3
  • What's CSS Sprite CSS Sprite是網頁處理圖片的一種方式。它允許你將網頁中會使用到各種零星...
    居客俠閱讀 591評論 0 0