html - 如何拉伸(stretch)DIV内的背景图片

Question

HTML:

<div class="navImageLinks">
    <div id="fp" class="mainImageNav floatLeft fp">
        <img src="../theImages/FindaProvider_icon.png" width="20" height="20" style="vertical-align: middle;" /> Find a Provider
    </div>
    <div id="sv" class="mainImageNav floatLeft sv">
        <img src="../theImages/Services_icon.png" width="20" height="20" style="vertical-align: middle;" /> Services
    </div>
    <div id="lc" class="mainImageNav floatLeft lc">
        <img src="../theImages/Locations_icon.png" width="20" height="20" style="vertical-align: middle;" /> Locations
    </div>
    <div id="ma" class="mainImageNav floatLeft ma">
        <img src="../theImages/MakeAnAppt_icon.png" width="20" height="20" style="vertical-align: middle;" /> Make an Appointment
    </div>
</div>

CSS:

.navImageLinks
{
    width: 100%;
    overflow: hidden;
    padding: 0;
    margin: 0;
}
.mainImageNav
{
    width: 25%;
    height: 30px;
    line-height: 30px;
    vertical-align: middle;
    text-align: center;
    font-size: small;
    padding: 0;
    margin: 0;
    color: #FFF;
    font-family: Arial, Verdana;
    font-weight: bold;
}
.fp
{
    background: url('../theImages/FindaDoc_NotActive.png') no-repeat;
    background-size: 100% 100%;
    cursor: pointer;
}
.sv
{
    background: url('../theImages/Services_NotActive.png') no-repeat;
    background-size: 100% 100%;
    cursor: pointer;
}
.lc
{
    background: url('../theImages/Locations_NotActive.png') no-repeat;
    background-size: 100% 100%;
    cursor: pointer;
}
.ma
{
    background: url('../theImages/MakeAnAppt_NotActive.png') no-repeat;
    background-size: 100% 100%;
    cursor: pointer;
}

IE(缩小):

Firefox(缩小):

如何编辑我的 CSS 以使背景在 IE 中也能拉伸(stretch)？

Answer 1

我们可以使用新的 css3 背景大小属性来做到这一点。

 -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;

在 IE 中，封面背景使用以下 css 属性工作。

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.myBackground.jpg', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')";

请参阅以下文章以探索其他有趣的方法来实现相同的目的: http://css-tricks.com/perfect-full-page-background-image/