Question

我必须在3个div中设置背景图像（精灵png）。我需要让pngs调整div大小，因为它是一个流畅的布局。

我一直在寻找解决方案，只能在html中使用<img>找到解决方案。我很欣赏这将是一种处理情况的简单方法，但需要使用背景图像。我需要一个背景图片解决方案 - 请不要使用<img>建议！

我意识到css3提供了一个可能的背景大小的解决方案，但这对IE7＆amp; 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引入的{em>完全原因background-size。

Answer 2

使用简单的CSS是不可能的，但您可以通过第三方调整背景图像的大小。

调整div背景图像的大小

2 个答案: