jquery - 调整 div 背景图片的大小

Question

我必须在 3 个 div 内设置背景图像(sprite png)。我需要 png 随 div 大小调整大小，因为它是一种流畅的布局。

我四处寻找解决方案，但只能使用 <img> 找到解决方案在 html 中。我很欣赏这将是处理这种情况的一种更简单的方法，但需要使用背景图像。我需要背景图像的解决方案 - 不建议使用 <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>

Answer 1

因为您不愿意使用 img 元素，所以这是不可能的。

这就是 CSS3 引入 background-size 的确切原因。