如何在网站上使用两个背景图像。一个将在另一个前面 - 前面的稍微小一点

Question

我有一个背景图片，它有一个漂亮的时髦红色闪光灯设计，我在所有的网页上都使用它，我有第二个时髦的背景，我想在最后一页上使用。该站点位于 Wordpress 模板中。第一个红色时髦背景在所有页面上，最后一页我想在标准背景之上放置第二个背景图像（其中包含更多金色元素），以便第一个背景有点像寄宿生，只是溢出到下一个分页符。

有人可以在 html 和 css 中提供此代码的示例吗？您可以使用您选择的任意两张图片，只要两张图片都能填满屏幕的大部分内容，且顶部的图片稍小即可。

Answer 1

You can do it with absolute positioning.

img{
  position:absolute;
}

.img1{
  width:30%;
  height:50%;
 }
.img2{
  width:29%;
  height:46%;
  margin: 0.5%;
}

<img class="img1" src="https://images.pexels.com/photos/1097456/pexels-photo-1097456.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"></img>
<img class="img2" src="https://image.slidesharecdn.com/lighterdot-140328042229-phpapp02/95/making-your-slides-lighter-9-638.jpg?cb=1434979032"></img>

Answer 2

解决方案：

div {
  width: 300px;
  height: 300px;
  background-image: url("https://images.pexels.com/photos/1097456/pexels-photo-1097456.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500");
  background-size: cover;
  position: relative;
}
div::before {
content: '';
  position: absolute;
  background-image: url("https://image.slidesharecdn.com/lighterdot-140328042229-phpapp02/95/making-your-slides-lighter-9-638.jpg?cb=1434979032");
  background-size: cover;
  top: 15%;
  left: 15%;
  bottom: 15%;
  right: 15%;
}

<div>test</div>

如何在网站上使用两个背景图像。一个将在另一个前面 - 前面的稍微小一点

How do I use two background images on a website. One will be in front of the other - the front one slightly smaller

html

css

background-image