如何在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中延伸？

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/