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

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

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

.wrapper{
背景图片：url(https://i.ibb.co/gD7vNSs/fleur-cerf.png)，网址(https://i.ibb.co/Nn2Wt9Q/fleur-renard.png);
背景位置：左上、右上；
背景重复：重复-y；
}
.box1{
填充：50px；
左侧填充：100px；
背景#f6f7f9；
}
.box2{
填充：50px；
左侧填充：100px；
背景#e89d8c；
}

这是一个标题

这是一段

这是一个标题

这是一段

一个伪元素和很少的z索引可以做到这一点：

.wrapper{
位置：相对位置；
}
.wrapper：：之后{
内容：“；
位置：绝对位置；
排名：0；
左：0；
右：0；
底部：0；
背景图片：url(https://i.ibb.co/gD7vNSs/fleur-cerf.png)，网址(https://i.ibb.co/Nn2Wt9Q/fleur-renard.png);
背景位置：左上、右上；
背景重复：重复-y；
}
.box1{
填充：50px；
左侧填充：100px；
背景#f6f7f9；
}
.box2{
填充：50px；
左侧填充：100px；
背景#e89d8c；
}
/*使内容始终位于顶部*/
.box1*，
.box2*{
位置：相对位置；
z指数：2；
}

这是一个标题

这是一段

这是一个标题

这是一段

太棒了！谢谢这是有效的，我有新的东西要学习你的代码！