resize div背景圖片

我必須在3格內設置背景圖片（sprite pngs）。我需要PNG的大小，因爲它是一個流暢的佈局。resize div背景圖片

我環顧四周尋找解決方案，只能在html中找到使用<img>的解決方案。我很欣賞這將是一種更簡單的方法來處理這種情況，但需要使用背景圖像。我需要一個解決方案的背景圖片 - 不建議使用<img>請！

我意識到css3提供了一種可能的背景尺寸解決方案，但這對IE7 & IE8和其他非css3瀏覽器沒有幫助。我很高興使用jquery，但想不到如何動態調整png以適應div。

我真的很感謝一些幫助，但請理解我無法使用<img>。

這裏是我的CSS：

a.bigButton { 
height:30%; 
width:30%; 
display:block; 
float:left; 
} 
a.bigButton#btn-menus:link { 
background:url(images/btn-menus-large.png) top center no-repeat; 
background-position: 0 0; 
} 
a.bigButton#btn-menus:hover { 
background-position: -298px 0; 
} 
a.bigButton#btn-functions:link { 
background:url(images/btn-functions-large.png) top center no-repeat; 
background-position: 0 0; 
} 
a.bigButton#btn-functions:hover { 
background-position: -298px 0; 
} 
a.bigButton#btn-packages:link { 
background:url(images/btn-av-large.png) top center no-repeat; 
background-position: 0 0; 
} 
a.bigButton#btn-packages:hover { 
background-position: -298px 0; 
}

我的HTML：

<div id="quick-links-holder"> 
<a href="#" alt="Check out our menus" class="scroll bigButton btnResize" id="btn-menus"></a> 
<a href="#" alt="What function will you hold at Events Centre?" class="scroll bigButton btnResize addMargin" id="btn-functions"></a> 
<a href="#" alt="Check out our functions and packages" class="scroll bigButton btnResize addMargin" id="btn-packages" ></a> 
</div>

來源

2011-08-22 circey

使用JavaScript獲取用戶窗口大小並獲得與您需要使用圖像標記相匹配的圖像的缺點。儘管對於你想要的東西，只是使用背景圖片，並讓它自己展示更多或更少，這可能是一件好事。你只需要把你想要的部分放在適當的位置。 – djlumley

不能完成，而不是你（或你的客戶）施加的限制。 – maxedison

既然你不願意使用img元素，這是根本不可能的。

這是確切原因CSS3引入background-size。

來源

2011-08-22 02:49:50

我討厭接受某件事是不可能實現的，但在這種情況下我必須這樣做。我找到了適合的解決方法。 – circey

這是不可能使用簡單的CSS，但你可以調整第三方的背景圖像。

來源

2012-12-20 15:34:23

resize div背景圖片

回答

相關問題