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

艳兵 Dev 提问于 2026-03-01 11:51:19 阅读 11

前端

我给一个div加了背景图，然后想用mix-blend-mode: multiply让它和下面的文字混合，但完全没效果，是哪里不对？

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

.container {
  background-image: url('bg.jpg');
}
.text {
  mix-blend_mode: multiply; /* 这里故意写错测试过，但正确写法也不行 */
  color: white;
}

CSS3

我来解答赞 7 收藏

反馈

1 条解答

一子墨 Lv1

mix-blend-mode 是让元素和它下方的兄弟元素混合，不是和父元素的背景混合。想实现你要的效果，把背景图单独抽出来做一个绝对定位的兄弟元素，或者用伪元素当背景层。

.container {

  position: relative;

}

.container::before {

  content: '';

  position: absolute;

  inset: 0;

  background-image: url('bg.jpg');

  z-index: 0;

}

.text {

  position: relative;

  z-index: 1;

  mix-blend-mode: multiply;

  color: white;

}

这样文字就能和伪元素背景层正确混合了，搞定。

2026-03-01 12:02