使用background-blend-mode:multiply实现背景图纯色层混合不生效如何解决

核心原因 #

你当前的代码中background-blend-mode: multiply本身已经生效，观察不到效果是由两个特性共同导致的：

• 正片叠底（multiply）的运算逻辑为：两个颜色同RGB通道的色值（0-255区间）分别相乘后除以255得到最终色值。你选用的红色rgb(255,0,0)和黄色rgb(255,255,0)运算后得到的结果仍为rgb(255,0,0)，和原红色完全一致，肉眼无法区分差异。
• 你声明的两个渐变图层均为100%宽高、完全覆盖元素，没有错位、透明度或尺寸差异，混合后只会呈现统一的运算后纯色，不会出现分层效果。

效果验证示例 #

替换为以下CSS代码即可直观看到混合效果：

.ye {
  width: 100px;
  height: 100px;
  background-repeat:no-repeat; 
  /* 蓝色和黄色正片叠底会得到绿色 */
  background-image: linear-gradient(blue 0 0), linear-gradient(yellow 0 0);
  background-blend-mode: multiply;
}

局部混合效果实现 #

如果需要实现部分区域的混合效果，可以单独调整每个背景图层的尺寸和位置：

.ye {
  width: 100px;
  height: 100px;
  background-repeat:no-repeat; 
  background-image: linear-gradient(blue 0 0), linear-gradient(yellow 0 0);
  /* 两个渐变各占70%宽度，重叠30%区域用于混合 */
  background-size: 70% 100%, 70% 100%;
  background-position: left, right;
  background-blend-mode: multiply;
}

补充说明 #

background-blend-mode会将background-color属性声明的背景色也纳入混合计算，顺序为背景色在最底层，background-image中声明的图层从上到下依次混合。

内容的提问来源于stack exchange，提问作者Theo Cerutti