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。它只显示960px的图像。我做错了什么？

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确实声称拥有良好的浏览器支持。

在页脚的全宽度背景图象

1 个答案: