BG2顶部的BG1具有不透明度？

Question

我目前正在学习编码，而且我已经非常感谢这个网站了。但是，我的网站遇到了问题，我似乎无法弄清楚如何使其正常工作。

我找到了几个问题的答案，但图片没有显示，或者降低不透明度会触发整个页面。

我需要帮助的是;我怎么能把BG1作为背景，BG2顶部有BG2，它们都在我的桌子和桌子行后面，等等？

我想要实现的目标：example | example 2

Answer 1

这是一个小提琴：https://jsfiddle.net/joshcrowe/esknedju/1/

#container {
  background-image: url(image1.png);
  opacity: 0.7;
}


#container::after {
  content: "";
  background: url(front.png);
  opacity: 0.5;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: absolute;
}

让::after允许图片在::before和::after之间的元素背景图片上显示。