如何在背景颜色之上显示背景图像？

Question

我想在背景颜色之上显示背景图像。难点是背景图片必须在两个盒子之上，并且不能在盒子之间切割。我找到了一种通过在每个框中定义背景图像来在颜色上显示图像的方法，但它会剪切图像。

这是我的原始代码，其中背景颜色位于背景图像上方并将其隐藏：

.wrapper {
  background-image: url(https://i.ibb.co/gD7vNSs/fleur-cerf.png), url(https://i.ibb.co/Nn2Wt9Q/fleur-renard.png);
  background-position: top left, top right;
  background-repeat: repeat-y; 
}
.box1 {
    padding: 50px;
    padding-left: 100px;
    background: #f6f7f9;
}

.box2 {
    padding: 50px;
    padding-left: 100px;
    background: #e89d8c;
}

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" type="text/css" href="test.css">
</head>
<body>
  <div class="wrapper">
    <div class="box1">
     <h1>This is a heading</h1>
     <p>
     This is paragraph
     </p>
   </div>
   <div class="box2">
     <h1>This is a heading</h1>
     <p>
     This is paragraph
     </p>
    </div>
  </div>
</body>
</html>

有什么想法吗？

Answer 1

一个伪元素，很少z-index能做到：

.wrapper {
  position:relative;
}

.wrapper::after {
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background-image: url(https://i.ibb.co/gD7vNSs/fleur-cerf.png), url(https://i.ibb.co/Nn2Wt9Q/fleur-renard.png);
  background-position: top left, top right;
  background-repeat: repeat-y;
}

.box1 {
  padding: 50px;
  padding-left: 100px;
  background: #f6f7f9;
}

.box2 {
  padding: 50px;
  padding-left: 100px;
  background: #e89d8c;
}
/* to make the content always on the top */
.box1 *,
.box2 * {
  position:relative;
  z-index:2;
}

<div class="wrapper">
  <div class="box1">
    <h1>This is a heading</h1>
    <p>
      This is paragraph
    </p>
  </div>
  <div class="box2">
    <h1>This is a heading</h1>
    <p>
      This is paragraph
    </p>
  </div>
</div>

如何在背景颜色之上显示背景图像？

How can I display a background image on top of background color?

html

css

background-image

background-color