如何避免在不使用ClipPath的情况下混色？

.element::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 255, 0.5); /* 蓝色半透明 */
}

.element::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 0, 0, 0.5); /* 红色半透明 */
}

.element {
  background-image: url("blue.png"), url("red.png");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  background-color: rgba(0, 0, 0, 0); /* 透明背景色 */
}

.element {
  background-color: blue;
  mix-blend-mode: multiply; /* 叠加模式 */
}