Question

我正在为朋友建立一个网站，目前使用以下CSS有一个覆盖身体的背景图片：

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％的页面，然后再拍摄另一张照片或纯白色背景。

我怎么能这样做？我是否必须摆脱身体标签中的背景图像并使用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

Answer 2

http://www.w3schools.com/css/css3_backgrounds.asp

＆＃13;

<!DOCTYPE html>
<html>
<head>
<style>
#example1 {
    border: 1px solid black;
    background:url(http://www.freeiconspng.com/uploads/flower-png-20.png);
  background-size: 25%;
    background-repeat: no-repeat;
    padding:15px;
  background-color: blue;
}

</style>
</head>
<body>

<div id="example1">
<h2>Lorem Ipsum Dolor</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>


</body>
</html>

＆＃13;

Answer 3

另一种可能性，虽然它可能会把事情放在最底层。

-webkit-background-size: 25%;
-moz-background-size: 25%;
-o-background-size: 25%;
background-size: 25%;

多个背景图片大小不同

3 个答案: