background-position和雪碧圖(CSS Sprites)用法


       background-position屬性使用頻率非常高,大量的網站為了減少http請求數,會將大量的圖片圖片合成一張雪碧圖(Sprite)來使用。雪碧圖的使用就是通過控制background-position屬性值來確定圖片呈現的位置,不得不說它的作用非常重要,當然除了在使用雪碧圖的場景外,別的某些場景也常常會使用到這個屬性,這次就總結下它的用法。

       還是那句話,工欲善其事必先利其器,只有真正的了解background-position的特性才能在需要的場景更好的運用它。

background-position的定義

background-position 屬性設置背景圖像的起始位置。

這個屬性設置背景原圖像(由 background-image 定義)的位置,背景圖像如果要重復,將從這一點開始。

提示:
       background-position屬性設置背景原圖像(由 background-image 定義)的位置,意味着使用這個屬性的前提是必須設置背景原圖像background-image。

background-position的屬性值

        background-position有兩個屬性值, background-position:x | y,用法上可以對其一個屬性單獨使用 background-position-x 和 background-position-y。

background-position屬性值有三種情況

這里寫圖片描述

提示:
       background-position兩個屬性值可以混用,例如:方向值和數值、數值和百分比,並非x軸和y軸需要設置為同一類型的屬性值,這點也正是說明了background-position屬性可以衍生單獨設置background-position-x 或 background-position-y。

background-position屬性值之神奇的百分比

       我們都知道background-position 屬性的作用:設置背景圖像的起始位置。這里的起始位置是相對於自身容器而言,如果屬性值為數值,大家可能很好理解,例如:background-position:100px 50px 這個屬性值意味着圖片在距離自身容器x軸為100px、y軸為50px的位置作為圖片顯示的起點位置。

這里寫圖片描述

然而使用百分比來設置屬性值,是以自身容器的長寬 減去 圖片的長寬 乘以 百分比 所得的數值來確定圖片的起始位置。

公式:
(容器自身的寬度/高度 - 圖片自身的寬度/高度) x 百分比

例如:background-position:50% 50%
這里寫圖片描述

提示:

  1. background-position屬性值如果是數值,那么指相對於容器自身數值的距離作為起始位置;如果是百分比或者是方向,那么指的是相對於容器自身(容器自身的寬度/高度 - 圖片自身的寬度/高度) x 百分比 所得的數值作為起始位置。
  2. 如果不設置background-position屬性值,那么默認起始位置為background-position:0% 0%。
  3. 方向值和百分比的計算方式是一樣的,它們可以相互轉換,left:0%,right:100%,center:50%。
  4. 如果background-position屬性值只設置一個,那么另一個默認為center。

雪碧圖

       CSS雪碧圖即CSS Sprites,也有人叫它CSS精靈,是一種CSS圖像合並技術,該方法是將小圖標和背景圖像合並到一張圖片上,然后利用CSS的背景定位來顯示需要顯示的圖片部分。

這里寫圖片描述

上面這張圖片是由多個小圖片合成的,前端成它為CSS雪碧圖。

background-position屬性在雪碧圖中的用法

       了解了background-position屬性的用法,那么對於如何使用雪碧圖的學習就相對簡單了很多。使用雪碧圖之前,我們需要知道雪碧圖中各個圖標的位置。
這里寫圖片描述

       從上面的圖片不難看出雪碧圖中各個小圖標(icon)在整張雪碧圖的起始位置,例如第一個圖標(裙子)在雪碧圖的起始位置為 x:0,y:0,第二個圖標(鞋子)在雪碧圖的起始位置為 x:0,y:50px,第三個圖標(足球)在雪碧圖的起始位置為x:0,y:100px,依次類推可以得出各個圖片相對於雪碧圖的起始位置。

       以上面的雪碧圖為例(實際雪碧圖中各個小圖片的起始位置和上面的展示圖不同)用一個Demo來闡述它的使用方法。

HTML

<div class="box">
<span class="icon1"></span>
<span class="icon2"></span>
<span class="icon3"></span>
<span class="icon4"></span>
</div>

CSS

    <style>
.box{width: 600px; height:300px; border: 3px solid #ccc; background-color: #8064A2; }
span{display: inline-block; width: 25px; height: 25px; border: 3px solid #ccc;
background-image: url(css/img/sidebar.png); background-repeat: no-repeat;
margin: 5px;}

.icon1{background-position: 0 0;}
.icon2{background-position: -40px 0;}
.icon3{background-position: 0 -25px;}
.icon4{background-position: -40px -25px;}
</style>

這里寫圖片描述

為什么使用雪碧圖時background-position屬性值為負數

       上面的例子已經闡述了如何使用雪碧圖,只不過初學者可能會對雪碧圖中的background-position屬性值為負值有所疑惑。這個問題其實不難回答,如果細心的人應該很早就發現了使用負數的根源所在。這邊用上面的Demo為例,來分析這個問題。上面的span標簽是一個25px長寬的容器,在使用背景圖時,背景圖的初始位置會從容器的左上角的開始鋪滿整個容器,然而容器的大小限制了背景圖呈現的大小,超出容器部分被隱藏起來。假如設置background-position: 0 0 那么意味着,背景圖相對於容器(span標簽)x軸=0;y軸=0的位置作為背景圖的起始位置來顯示圖片。所以如果需要在容器中顯示第二個圖標,意味着雪碧圖x軸方向要左移動,左移動雪碧圖即它的值會設置為負數,同理y軸方向也一樣。

這里寫圖片描述


注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
粤ICP备14056181号  © 2014-2021 ITdaan.com