调整div背景图像的大小

Question

我必须在3个div中设置背景图像(精灵png).我需要pngs以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.