如何使用CSS创建两个背景图片？ [英] How to have two background-images with CSS?
问题描述
我想弄清楚如何在css中显示两个背景图像，以便第一个背景是用css生成的渐变图像，然后在该渐变上显示some-image.png。
I am trying to figure out how to get to display two background-images in css so that the first background is a gradient image generated with css and then over that gradient to have some-image.png.
我尝试在渐变效果的div上方的另一个div中添加someimage.png，但我没有找到一种方法将高度添加到该div而不会混淆页面。
I tried adding someimage.png in another div above the div with gradient effect but I didn't find a way to add height to that div without messing up the page.
这个想法是在页面底部有一个渐变背景，并且有一个图像，它具有完整的页面宽度，所以我不能把它放在集装箱分区。我不知道这是否可能：）
The idea is to have a gradient background and over that on the bottom of the page, an image that will have full page width, so I can not place it in the container div. I don't know if this is even possible :)
任何帮助将不胜感激！
是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代码：
The HTML code:
<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');
}
从这里开始，当使用背景等属性时-position 或 background-size ，您需要使用两个以逗号分隔的值应用于各个图像。
From there on, when using properties such as background-position or background-size, you'll need to have two comma-separated values to apply to the individual images.
这篇关于如何使用CSS创建两个背景图片？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
