如何使用 CSS 获得两个背景图像？ [复制]答案

【问题标题】：How to have two background-images with CSS? [duplicate]如何使用 CSS 获得两个背景图像？ [复制]
【发布时间】：2016-05-18 18:14:24
【问题描述】：

我试图弄清楚如何在 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>

【问题讨论】：

好吧，我刚刚搜索了css multiple backgrounds，first result 正是您想要的。你为什么不谷歌它？用谷歌搜索这样一个微不足道的问题而不是写一个关于它的问题，这不会节省你的时间吗？

标签： html css

【解决方案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;
 }

【讨论】：

【解决方案2】：

好吧，你可以这样说：

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

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

【讨论】：