css - 如何在 CSS 中使用 3 个背景图像进行可调整大小的布局？

Question

我正在处理一个小型网站示例，我想要一个可调整大小的 div 背景，但似乎无法让底部背景正常工作。

我的CSS：

.content {
    padding: 10px 0;
    height: 100%;
    background-image: url(bodytop.png), url(body.png), url(bodybot.png);
    background-size: 100%;
    background-repeat: repeat-x, repeat-y, repeat;
}

我怎样才能让它工作？bodybot.png 不会显示给我。我可以通过在我的 HTML 中创建一个新的 div 来做到这一点吗？我希望 bodytop.png 在顶部，body.png 在中间调整大小，bodybot.png 在底部。谢谢。

Answer 1

由于bodybot.png被 覆盖body.png。你需要移到bodybot.png前面。

您放入背景图像的第一张图像最后绘制，最后一个图像最先绘制。

Answer 2

这就是你应该这样做的方式......

检查修改后的FIDDLE

CSS

 .container{
background: url(http://i.imgur.com/AFh3Y.png) bottom left repeat-x, url(http://i.imgur.com/kiCmk.png) top left no-repeat , url(http://i.imgur.com/3qKoZ.png) left repeat-y ;
width:960px; display:block;
}

.content {
padding: 10px 0;
}