Html 如何使用CSS创建两个背景图像？_Html_Css

Html 如何使用CSS创建两个背景图像？

html css

Html 如何使用CSS创建两个背景图像？,html,css,Html,Css,我正在试图弄清楚如何在css中显示两个背景图像，这样第一个背景是用css生成的渐变图像，然后在渐变上显示some-image.png 我尝试在div上方的另一个div中添加someimage.png，并使用渐变效果，但我没有找到一种方法在不破坏页面的情况下为该div添加高度我们的想法是在页面底部有一个渐变背景和一个全页面宽度的图像，所以我不能将它放在容器div中。我不知道这是否可行：）任何帮助都将不胜感激这是CSS代码： body { margin: 10px 40px; backgrou

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


大字标题
一些文本
抄袭

来自：

你可以这样说：

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

从那时起，当使用诸如

background position

或

background size

之类的属性时，您需要有两个逗号分隔的值才能应用于各个图像。

好吧，我只是在谷歌上搜索了

css multiple backgrounds

，而这正是您想要的。你为什么不谷歌一下呢？用谷歌搜索这样一个琐碎的问题，而不是写一个关于它的问题，会不会节省你的时间？

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