html - 多个不同大小的背景图像

Question

我正在为一个 friend 建立一个网站，目前有一个背景图片使用以下 CSS 覆盖 body :

body {
background: url("backgroundOriginal.jpeg") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
height: 100%;
overflow-x: hidden;
}

他希望该照片仅占页面的大约 25%，然后用另一张照片或纯白色背景覆盖其余部分。

我该怎么做？我是否必须摆脱 body 标签中的背景图像并改用 div 还是有更简单的方法？

Answer 1

你可以用 CSS3 来实现

body {
   background-image: url(images/image1.png), url(images/image2.png);
   background-repeat: repeat-x, repeat;
}

http://www.css3.info/preview/multiple-backgrounds/

主流浏览器的当前版本都支持它，但是如果您需要支持 IE8 或更低版本，那么最好的解决方法是添加额外的 div:http://caniuse.com/#search=multiple%20backgrounds