点击右上方红色按钮关注“web秀”，让你真正秀起来

前言

假如「一图胜千言」，那多图混合创造的效果要超过千言万语。同理，CSS 的混合模式为设计带来的可能性远远超出了你的想象。

你所听到的 CSS 混合模式，就是三个被现代浏览器所广泛支持的 CSS 属性。这三个属性包含了： – background-blend-mode：用于混合元素背景图案、渐变和颜色 – mix-blend-mode：用于元素与元素之间的混合 – isolation：客户阻止某些元素在mix-blend-mode 使用时被混合

不过，本文主要聚焦在 background-blend-mode 这个支持度最好的属性上，它能给你带来以往只有 Photoshop 才能做到的引人注目的效果。

CSS 渐变和 background-blend-mode 组合

我们使用background属性来设置 CSS 渐变，常用的值如 linear-gradient(), radial-gradient(), repeating-linear-gradient() 以及 repeating-radial-gradient()，而且background属性还能支持多个渐变参数，通过逗号来分隔。

但如今有了background-blend-mode 属性，我们可以创造更多变化多样的效果。

光谱背景

我们通过覆盖三层渐变来创造一个近乎全波段光谱的图像，展现再大家面前。

.web_bg {
 background:
 linear-gradient(red, transparent),
 linear-gradient(to top left, lime, transparent),
 linear-gradient(to top right, blue, transparent);
 background-blend-mode: screen;
}

用 CSS 背景混合模式制作高级效果