在本文http://css-tricks.com/css-sprites/中，它討論了如何從1個較大的圖像中裁剪出較小的圖像。您能否告訴我是否有可能/如何裁剪出較小的圖像，然后在進行布局之前縮放裁剪的區域？這是該文章的示例：A{ background-image: url(http://www.jaredhirsch.com/coolrunnings/public_images/3deb155981/spriteme1.png); background-position: -10px -56px;}我想知道從spriteme1.png裁剪圖像后如何縮放圖像這是示例的網址：http : //css-tricks.com/examples/CSS-Sprites/Example1After/所以我想知道是否可以縮小項目1,2,3,4旁邊的圖標？
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。
Helenr
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 瀏覽
相關問題推薦
添加回答
舉報
0/150
提交
取消