3 回答

TA貢獻1804條經驗 獲得超3個贊
使用精靈時,僅限于精靈中圖像的尺寸。background-sizeStephen提到的CSS屬性尚未得到廣泛支持,并且可能會導致IE8及以下版本的瀏覽器出現問題-考慮到它們的市場份額,這不是一個可行的選擇。
解決該問題的另一種方法是使用兩個元素并通過將其與img標記一起使用來縮放子畫面,如下所示:
<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>
這樣一來,外部元素(div.sprite-image)從img標記中裁剪了20x20px的圖像,其作用就像是scaled background-image。

TA貢獻1780條經驗 獲得超4個贊
嘗試以下方法:可伸縮的Sprites-跨瀏覽器,可響應地調整大小/拉伸CSS Sprite圖像
此方法“響應式”縮放精靈,以便根據瀏覽器窗口的大小調整寬度/高度。它不被使用, background-size因為在較舊的瀏覽器中不存在對此的支持。
的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>
- 3 回答
- 0 關注
- 646 瀏覽
相關問題推薦
添加回答
舉報