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

Mr.柯慧提问于 2026-02-26 17:40:20 阅读 19

前端

我在做一个卡片hover效果，想用mix-blend-mode: multiply让文字和背景图混合，但完全没反应。背景是用background-image设置的，文字是普通span。查了文档说要同层元素才行？那是不是必须把背景图改成img标签才能用混合模式啊？

试过给父容器加isolation: isolate也没用，控制台也没报错，就是看起来跟没加一样。下面是我的代码：

.card {
  background-image: url('bg.jpg');
  position: relative;
}
.card span {
  mix-blend-mode: multiply;
  color: white;
}

我来解答赞 5 收藏

反馈

1 条解答

好妍~ Lv1

混合模式只对重叠的前景内容生效，背景图不算前景。你得把背景图换成一个伪元素或子元素来当前景层。

搞定代码：

.card {

  position: relative;

  overflow: hidden;

}

.card::before {

  content: '';

  position: absolute;

  inset: 0;

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

  z-index: 0;

}

.card span {

  position: relative;

  z-index: 1;

  mix-blend-mode: multiply;

  color: white;

}

2026-02-26 18:06