Question

我试图找出如何在css中显示两个背景图像，以便第一个背景是用css生成的渐变图像，然后在该渐变上生成some-image.png。

我尝试使用渐变效果在div上方的另一个div中添加someimage.png但是我没有找到一种方法来增加该div的高度而不会弄乱页面。

这个想法是在页面底部有一个渐变背景，一个具有整页宽度的图像，所以我不能将它放在容器div中。我不知道这是否可能：）

任何帮助都将受到高度赞赏！

这是CSS代码：

body {
margin: 10px 40px;
background: #fff;
background-image: linear-gradient(to bottom right, #A33030 0%, rgba(182, 69, 69, 0.88) 100%);
background-repeat: no-repeat;
background-attachment: fixed;
font-family: "Open Sans";
font-size: 17px;
color: #FFFFFF;
background-size: cover;
}
.overlay-image{
height:100%;
background-image: some-image.png
}

HTML代码：

<body>
<div class="overlay-image"></div>
<div class="container">
<header><a class="logo"><img src="logo.png"></a><nav><a href="#">Blog</a><a href="#">About</a><a href="#">Courses</a><a href="#">Contact</a></nav></header>
<div class="content"><h1>Headline</h1>
<div class="box-test">
<img src="face.jpg">
<p>Some text</p>
</div>
</div>
<div class="footer">Copyrigth</div>
</div>
</body>

Answer 1

来自：http://www.w3schools.com/css/css3_backgrounds.asp

 #example1 {
     background-image: url(img_flwr.gif), url(paper.gif);
     background-position: right bottom, left top;
     background-repeat: no-repeat, repeat;
 }

Answer 2

嗯，你可以这样说：

.double {
  background-image: url('first_image.png') url('second_image.png');
}

从那时起，当使用background-position或background-size等属性时，您需要将两个以逗号分隔的值应用于单个图像。

如何使用CSS获得两个背景图像？

2 个答案: