1

我正在使用 960gs（在我的本地环境中）并将这个 CSS 代码插入到我的footerdiv 中：

## 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 像素的图像。我做错了什么？

4

1 回答 1

0

我花了一段时间才意识到你想要做什么。您正在尝试缩放背景图像，对吗？你不能这样做，至少在 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 确实声称对浏览器有很好的支持。

于 2012-12-02T03:17:16.960 回答