页脚中的全宽背景图像

Question

我正在使用 960gs（在我的本地环境中），我将此 CSS 代码插入到我的 footer div 中：

## style.css

#footer{
    background:url("images/footer.png")  repeat-x scroll top transparent; 
    height: 130px; 
    width:100%; 
    overflow:hidden;
}

## footer.php

<div id="footer">   
    <div id="nav" class="container_12">  </div>
    <div id="endfooter" class="container_12">
        <div id="copyright" class="grid_3 alpha"> </div>  
        <div id="design" class="grid_3 omega">  </div>  
    </div> <!-- endfooter -->
</div> <!-- end footer -->

问题是页面没有以全宽显示footer div，背景覆盖整个div。它仅显示 960 像素的图像。我做错了什么？

Answer 1

我花了一段时间才意识到你想要做什么。您正在尝试缩放背景图像，对吗？你不能这样做，至少在 CSS2 中是这样。背景图像不缩放。您可以平铺它们（重复），但不能缩放它们。如果要缩放图像，则必须使用 <img> 标签。

如果你愿意依赖 CSS3 标准，你可以使用background-size

#footer{
    background:url("images/footer.png")  repeat-x scroll top transparent; 
    background-size:100% 130px;
    height: 130px; 
    width:100%; 
    overflow:hidden;
}

我不能保证 background-size 但 w3schools 确实声称对浏览器的支持很好。