點擊右上方紅色按鈕關注“web秀”，讓你真正秀起來

如果「一圖勝千言」，那多圖混合創造的效果要超過千言萬語。同理，CSS 的混合模式為設計帶來的可能性遠遠超出了你的想象。

你所聽到的 CSS 混合模式，就是三個被現代浏覽器所廣泛支持的 CSS 屬性。這三個屬性包含了： - background-blend-mode：用于混合元素背景圖案、漸變和顔色 - mix-blend-mode：用于元素與元素之間的混合 - isolation：用戶阻止某些元素在mix-blend-mode 使用時被混合

不過，本文主要聚焦在 background-blend-mode 這個支持度最好的屬性上，它能給你帶來以往隻有 Photoshop 才能做到的引人注目的效果。

我們使用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 背景混合模式制作高級效果

更多背景

更多漸變圖案集合請點擊下方“了解更多”，可以讓你快速的在自己的網站裡使用。

喜歡小編的點擊關注，了解更多知識！

演示地址頁源碼，請點擊下方“了解更多”！

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!