亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

如何縮放CSS Sprite中的圖像

如何縮放CSS Sprite中的圖像

嗶嗶one 2019-11-26 14:46:13
在本文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。


查看完整回答
反對 回復 2019-11-26
?
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>


查看完整回答
反對 回復 2019-11-26
  • 3 回答
  • 0 關注
  • 646 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號