在本文http://css-tricks.com/css-sprites/中，它討論了如何從1個(gè)較大的圖像中裁剪出較小的圖像。您能否告訴我是否有可能/如何裁剪出較小的圖像，然后在進(jìn)行布局之前縮放裁剪的區(qū)域？這是該文章的示例：A{ background-image: url(http://www.jaredhirsch.com/coolrunnings/public_images/3deb155981/spriteme1.png); background-position: -10px -56px;}我想知道從spriteme1.png裁剪圖像后如何縮放圖像這是示例的網(wǎng)址：http : //css-tricks.com/examples/CSS-Sprites/Example1After/所以我想知道是否可以縮小項(xiàng)目1,2,3,4旁邊的圖標(biāo)？
3 回答
狐的傳說(shuō)
TA貢獻(xiàn)1804條經(jīng)驗(yàn) 獲得超3個(gè)贊
使用精靈時(shí)，僅限于精靈中圖像的尺寸。background-sizeStephen提到的CSS屬性尚未得到廣泛支持，并且可能會(huì)導(dǎo)致IE8及以下版本的瀏覽器出現(xiàn)問題-考慮到它們的市場(chǎng)份額，這不是一個(gè)可行的選擇。
解決該問題的另一種方法是使用兩個(gè)元素并通過將其與img標(biāo)記一起使用來(lái)縮放子畫面，如下所示：
<div class="sprite-image"
style="width:20px; height:20px; overflow:hidden; position:relative">
<!-- set width/height proportionally, to scale the sprite image -->
<img src="sprite.png" alt="icon"
width="20" height="80"
style="position:absolute; top: -20px; left: 0;" />
</div>
這樣一來(lái)，外部元素（div.sprite-image）從img標(biāo)記中裁剪了20x20px的圖像，其作用就像是scaled background-image。
Helenr
TA貢獻(xiàn)1780條經(jīng)驗(yàn) 獲得超4個(gè)贊
嘗試以下方法：可伸縮的Sprites-跨瀏覽器，可響應(yīng)地調(diào)整大小/拉伸CSS Sprite圖像
此方法“響應(yīng)式”縮放精靈，以便根據(jù)瀏覽器窗口的大小調(diào)整寬度/高度。它不被使用， background-size因?yàn)樵谳^舊的瀏覽器中不存在對(duì)此的支持。
的CSS
.stretchy {display:block; float:left; position:relative; overflow:hidden; max-width:160px;}
.stretchy .spacer {width: 100%; height: auto;}
.stretchy .sprite {position:absolute; top:0; left:0; max-width:none; max-height:100%;}
.stretchy .sprite.s2 {left:-100%;}
.stretchy .sprite.s3 {left:-200%;}
的HTML
<a class="stretchy" href="#">
<img class="spacer" alt="" src="spacer.png">
<img class="sprite" alt="icon" src="sprite_800x160.jpg">
</a>
<a class="stretchy s2" href="#">
<img class="spacer" alt="" src="spacer.png">
<img class="sprite" alt="icon" src="sprite_800x160.jpg">
</a>
<a class="stretchy s3" href="#">
<img class="spacer" alt="" src="spacer.png">
<img class="sprite" alt="icon" src="sprite_800x160.jpg">
</a>
添加回答
舉報(bào)
0/150
提交
取消