Css Sprite 圖片等比縮放圖片大小

NO IMAGE
1 Star2 Stars3 Stars4 Stars5 Stars 給文章打分!
Loading...

總的拼合大圖是256px * 46px,現在取某特定小圖示 縮放改為32px *
23px的圖片作為圖示。 改為如下圖所示:

原圖:

在我們的例項中,我們使用底部選單大小32px * 23px.為了保證普通顯屏裝置的影象顯示,在這個影象的基礎上做了一半的縮小。

在最初的CSS樣式中,background-position的屬性值都不需要進行任何設定,因為他們的預設值都是“0”,如下所示:

.x-navbar [class^='x-icon-'] {
background-image: url(img/icon_navbar_new_year.png);
width: 32px;
height: 23px;
} 

因此,最關鍵的問題是,我們怎麼知道background-size屬性值要設定為多少?

這裡有一個公式:
高解析度影象寬度 / 目標影象寬度 = X
原始Sprites影象寬度 / x = background-size的寬度值

我們高解析度下的圖示是256px * 46px;
我們目標影象的寬度是“46px”;
我們Sprites影象的總寬度是“256px”

根據前面的公式 可以得知
46/23 = 2 (高等比為2)
256/2 = 128 (進而得到寬)


最後的一件事情。我們只計算了背景影象的寬度值,為了確保背景影象縮放比例正常,我們將“height”值設定為“auto”。當然你也可以設定相的的值(設定background-sizer的寬度為auto,高度為具體值),但我發現設定寬度會比較容易。

.x-navbar [class^='x-icon-'] {
background-size: 128px auto;
}

然後就是根據圖片的位置座標進行顯示了:(所有位置也都 ÷2)

.x-icon-shouye {background-position: 0 0;}
.x-icon-dingdan {background-position: -32px 0;}
.x-icon-gouwuche {background-position: -64px 0;}
.x-icon-gengduo {background-position: -96px 0;}

這樣就實現了圖中的效果了!

親測簡寫:

【CSS sprite多圖拼合圖示 —— 等比例縮放】
原來圖示52 * 52,現要改為32 * 32,總的大圖是200 *700。

52/32=1.6  200/1.6=125

css寫法:
.icons-tag span {
   
  width: 32px;
  height: 32px;
  background: url(../img/common/tag.png) no-repeat;
  background-size: 125px  auto;
   
}
.icons-tag span.tag1 {
  background-position: 0 0;
}

.icons-tag span.tag2 {
  background-position: 0 -37px;  //原來是60,60/1.2=37.5
}

css Sprite線上測量工具http://www.spritecow.com/

相關文章

程式語言 最新文章