我正在使用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显示图像。我做错了什么?

最佳答案

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

10-07 19:38
查看更多