首頁  >  文章  >  web前端  >  css sprite 調整大張圖片中小圖示的大小

css sprite 調整大張圖片中小圖示的大小

高洛峰
高洛峰原創
2016-11-24 09:19:061483瀏覽

直接說解決方法:

css sprite 調整大張圖片中小圖示的大小

假設一張拼合好的大圖大小是:900 x 1000 px (如上圖)

現在想取圖中左上角的河馬圖標,並縮小圖標的大小。

正常取圖:

.sprite {
background: url('imgs/woqu_localjoin_all.png') no-repeat -21px -80px;
width: 190px;
height: 154px;
}

現在取正常圖示大小的一半:

<pre name="code" class="html">.sprite {
background: url(&#39;all.png&#39;) no-repeat -10px -40px;
width: 95px;
height: 74px;
background-size:450px 500px;
}

OK,大功告成!

最後推薦大家一款css sprite測量工具:http://www.spritecow.com/

打開,把拼合好的png圖拖進去:

css sprite 調整大張圖片中小圖示的大小

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn