我正在使用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确实声称对浏览器的支持很好。