点击右上方红色按钮关注“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 背景混合模式制作高级效果
以往实现上面的效果只能通过图片，而且图片体积非常的大。而通过 CSS 只需要几行代码即可实现这种效果，更不用说对 HTTP 请求数据量的节省了。
条纹网格背景
同样的，通过这个属性我们可以实现出一些有趣的条纹网格背景来：
.web_bg {
background:
repeating-linear-gradient(
-45deg,
transparent 0,
transparent 25%,
dodgerblue 0,
dodgerblue 50%
),
repeating-linear-gradient(
45deg,
transparent 0,
transparent 25%,
tomato 0,
tomato 50%
),
repeating-linear-gradient(
transparent 0,
transparent 25%,
gold 0,
gold 50%
), white;
background-blend-mode: multiply;
background-size: 100px 100px;
}
用 CSS 背景混合模式制作高级效果
圆圈环绕背景
再来试点别的，这次通过径向渐变来实现圆圈环绕背景：
.circles-background {
background:
radial-gradient(
khaki 40px,
transparent 0,
transparent 100%
),
radial-gradient(
skyblue 40px,
transparent 0,
transparent 100%
),
radial-gradient(
pink 40px,
transparent 0,
transparent 100%
), snow;
background-blend-mode: multiply;
background-size: 100px 100px;
background-position: 0 0, 33px 33px, -33px -33px;
}
用 CSS 背景混合模式制作高级效果
更多背景
更多渐变图案集合请点击下方“了解更多”，可以让你快速的在自己的网站里使用。
公告
閱讀更多 web秀 的文章
