點擊右上方紅色按鈕關注“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秀 的文章
