CSS混合模式为什么在背景图上不生效？

洺华~ 提问于 2026-02-27 19:50:20 阅读 23

前端

我给一个div设置了背景图，然后想用mix-blend-mode: multiply让它和下面的色块混合，但完全没效果，是哪里写错了吗？

试过给父容器加isolation: isolate也没用，代码大概是这样：

.bg {
  background-image: url('pattern.png');
  mix-blend-mode: multiply;
}
.overlay {
  background-color: red;
}

CSS3 Grid布局

我来解答赞 9 收藏

反馈

1 条解答

码农琳贺 Lv1

你可能用错属性了。如果想让背景图和背景色混合，用 background-blend-mode: multiply，不是 mix-blend-mode。前者是背景图层之间混合，后者是整个元素和它下方的内容混合。

.bg {

  background-image: url('pattern.png');

  background-color: red;

  background-blend-mode: multiply;

}

2026-02-28 14:40