css叠加元素同时触发

在CSS中，我们可以使用叠加元素同时触发，以达到更加细致的效果。

.Box {
  position: relative;
  width: 200px;
  height: 200px;
  background-color: #ddd;
  border-radius: 10px;
}

.Box::before,.Box::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

.Box::before {
  background-image: url('overlay.png');
  mix-blend-mode: multiply;
}

.Box::after {
  background-color: rgba(255,.75);
  mix-blend-mode: screen;
}

上面的代码中，我们使用了伪元素before和after来创建两个叠加层。在before的样式中，我们设置了一个背景图片，并使用mix-blend-mode属性将其与原始图片进行相乘混合；而在after的样式中，我们设置了一个半透明的背景色，并使用mix-blend-mode属性将其与原始图片进行滤色混合。

最终，这两个叠加效果被同时触发，使整个.Box元素看起来更加复杂和炫酷。