整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
文將介紹一些利用 CSS 中的 background、mix-blend-mode、mask 及一些相關屬性，制作一些稍微復雜、酷炫的背景。
通過本文，你將會了解到 CSS background 中更為強大的一些用法，并且學會利用 background 相關的一些屬性，采用不同的方式，去創造更復雜的背景圖案。在這個過程中，你會更好的掌握不同的漸變技巧，更深層次的理解各種不同的漸變。
同時，借助強大的 CSS-Doodle，你將學會如何運用一套規則，快速創建大量不同的隨機圖案，感受 CSS 的強大，走進 CSS 的美。
背景基礎知識
我們都知道，CSS 中的 background 是非常強大的。
首先，復習一下基礎，在日常中，我們使用最多的應該就是下面 4 種：
背景進階
當然。掌握了基本的漸變之后，我們開始向更復雜的背景圖案進發。我最早是在《CSS Secret》一書中接觸學習到使用漸變去實現各種背景圖案的。然后就是不斷的摸索嘗試，總結出了一些經驗。
在嘗試使用漸變去制作更復雜的背景之前，列出一些比較重要的技巧點：
接下來，開始組合之旅。
使用 mix-blend-mode
mix-blend-mode ，混合模式。最常見于 photoshop 中，是 PS 中十分強大的功能之一。在 CSS 中，我們可以利用混合模式將多個圖層混合得到一個新的效果。
關于混合模式的一些基礎用法，你可以參考我的這幾篇文章：
然后，我們來嘗試第一個圖案，先簡單體會一下 mix-blend-mode 的作用。
我們使用 repeating-linear-gradient 重復線性漸變，制作兩個角度相反的背景條紋圖。正常而言，不使用混合模式，將兩個圖案疊加在一起，看看會發生什么。
額，會發生什么就有鬼了:sweat_smile: 。顯而易見，由于圖案不是透明的，疊加在一起之后，由于層疊的關系，只能看到其中一張圖。
好，在這個基礎上，我們給最上層的圖案，添加 mix-blend-mode: multiply，再來一次，看看這次會發生什么。
可以看到，添加了混合模式之后，兩張背景圖通過某種算法疊加在了一起，展現出了非常漂亮的圖案效果，也正是我們想要的效果。
CodePen Demo - Repeating-linear-gradient background & mix-blend-mode
嘗試不同的 mix-blend-mode
那為什么上面使用的是 mix-blend-mode: multiply 呢？用其他混合模式可以不可以？
當然可以。這里僅僅只是一個示例，mix-blend-mode: multiply 在 PS 中意為正片疊底，屬于圖層混合模式的變暗模式組之一。
我們使用上面的 DEMO，嘗試其他的混合模式，可以得到不同的效果。
可以看到，不同的混合模式的疊加，效果相差非常之大。當然，運用不同的混合模式，我們也就可以創造出效果各異的圖案。
CodePen Demo - Repeating-linear-gradient background & mix-blend-mode
借助 CSS-Doodle 隨機生成圖案
到這，就不得不引出一個寫 CSS 的神器 -- CSS-Doodle，我在其他非常多文章中也多次提到過 CSS-doodle，簡單而言，它是一個基于 Web-Component 的庫。允許我們快速的創建基于 CSS Grid 布局的頁面，并且提供各種便捷的指令及函數（隨機、循環等等），讓我們能通過一套規則，得到不同 CSS 效果。
還是以上面的 DEMO 作為示例，我們將 repeating-linear-gradient 生成的重復條紋背景的顏色、粗細、角度隨機化、采用的混合模式也是隨機選取，然后利用 CSS-Doodle，快速隨機的創建各種基于此規則的圖案：
可以點進去嘗試一下，點擊鼠標即可隨機生成不同的效果：
CodePen Demo -- CSS Doodle - CSS MIX-BLEND-MODE Background
嘗試使用徑向漸變
當然，上面使用的是線性漸變，同樣，我們也可以使用徑向漸變運用同樣的套路。
我們可以使用徑向漸變，生成多重的徑向漸變。像是這樣：
給圖片應用上 background-size，它就會像是這樣：
像上文一樣，我們稍微對這個圖形變形一下，然后疊加兩個圖層，給最上層的圖形，添加 CSS 樣式 mix-blend-mode: darken：
CodePen Demo -- radial-gradient & mix-blend-mode Demo
借助 CSS-Doodle 隨機生成圖案
再來一次，我們使用 CSS-Doodle，運用上述的規則在徑向漸變，也可以得到一系列有意思的背景圖。
可以點進去嘗試一下，點擊鼠標即可隨機生成不同的效果：
CodePen Demo -- CSS Doodle - CSS MIX-BLEND-MODE Background 2
當然，上述的疊加都是非常簡單的圖案的疊加，但是掌握了這個原理之后，就可以自己嘗試，去創造更復雜的融合。:dog:
上述的疊加效果是基于大片大片的實色的疊加，當然 mix-blend-mode 還能和真正的漸變碰撞出更多的火花。
在不同的漸變背景中運用混合模式
在不同的漸變背景中運用混合模式？那會產生什么樣美妙的效果呢？
運用得當，它可能會像是這樣：
umm，與上面的條紋圖案完全不一樣的風格。
你可以戳進 gradienta.io 來看看，這里全是使用 CSS 創建的漸變疊加的背景圖案庫。
使用混合模式疊加不同的漸變圖案
下面，我們也來實現一個。
首先，我們使用線性漸變或者徑向漸變，隨意創建幾個漸變圖案，如下所示：
接著，我們兩兩之間，從第二層開始，使用一個混合模式進行疊加，一共需要設定 5 個混合模式，這里我使用了 overlay, multiply, difference, difference, overlay。看看疊加之后的效果，非常的 Nice：
CodePen Demo -- Graideint background mix
由于上面動圖 GIF 的壓縮率非常高，所以看上去鋸齒很明顯圖像很模糊，你可以點進上面的鏈接看看。
然后，我們可以再給疊加后的圖像再加上一個 filter: hue-rotate()，讓他動起來，放大一點點看看效果，絢麗奪目的光影效果：
CodePen Demo -- Graideint background mix 2
借助 CSS-Doodle 隨機生成圖案
噔噔噔，沒錯，這里我們又可以繼續把 CSS-Doodle 搬出來了。
隨機的漸變，隨機的混合模式，疊加在一起，燥起來吧。
使用 CSS-Doodle 隨機創建不同的漸變，在隨機使用不同的混合模式，讓他們疊加在一起，看看效果：
當然，由于是完全隨機生成的效果，所以部分時候生成出來的不算太好看或者直接是純色的。不過大部分還是挺不錯的 :joy:
CodePen Demo -- CSS Doodle Mix Gradient
感謝堅持，看到這里。
上述上半部分主要使用的混合模式。
關注我看下半部分，將主要使用 mask
精彩繼續~
程序員web前端教程之CSS3漸變，CSS3漸變（gradient）可以讓你在兩個或多個指定的顏色之間顯示平穩的過渡。 以前，你必須使用圖像來實現這些效果，現在通過使用 CSS3 的漸變（gradients）即可實現。此外，漸變效果的元素在放大時看起來效果更好，因為漸變（gradient）是由瀏覽器生成的。
1、線性漸變
語法：background: linear-gradient(direction, color-stop1, color-stop2, ...);說明：direction：默認為to bottom，即從上向下的漸變；
stop：顏色的分布位置，默認均勻分布，例如有3個顏色，各個顏色的stop均為33.33%。
示例1：to left、top right、to bottom、to top
div { background:linear-gradient(to left, red , blue) }
div { background:linear-gradient(to right, red , blue) }
div { background:linear-gradient(to bottom, red , blue) } /* 瀏覽器默認值 */
div { background:linear-gradient(to top, red , blue) }
分別產生“從右到左”、“從左到右”、“從上到下”、“從下到上”的“紅色–綠色”漸變
示例2：to right bottom、to right top、to left bottom、to left top
div { background: linear-gradient(to right bottom, red , blue); }
div { background: linear-gradient(to right top, red , blue); }
div { background: linear-gradient(to left bottom, red , blue); }
div { background: linear-gradient(to left top, red , blue); }
分別產生到“右下角”、“右上角”、“左下角”、“左上角”的漸變
示例3：使用角度漸變
div { background: linear-gradient(10deg, red, blue) }
2、徑向漸變
徑向漸變不同于線性漸變，線性漸變是從“一個方向”向“另一個方向”的顏色漸變，而徑向漸變是從“一個點”向四周的顏色漸變
語法：background: radial-gradient(center, shape, size, start-color, ..., last-color);說明：center：漸變起點的位置，可以為百分比，默認是圖形的正中心。
shape：漸變的形狀，ellipse表示橢圓形，circle表示圓形。默認為ellipse，如果元素形狀為正方形的元素，則ellipse和circle顯示一樣。
size：漸變的大小，即漸變到哪里停止，它有四個值。 closest-side：最近邊；
farthest-side：最遠邊； closest-corner：最近角； farthest-corner：最遠角
示例1：多顏色點均勻分布
div { background: radial-gradient(red, green, blue); }
以中心（50% 50%）為起點，到最遠角（farthest-corner），從red到green、blue的均勻漸變
EG:div { background: -webkit-radial-gradient(50% 50%, farthest-corner, red, green, blue); } 或 div { background: -webkit-radial-gradient(center, farthest-corner, red, green, blue); }
示例2：多顏色節點不均勻分布
div { background: radial-gradient(red 5%, green 15%, blue 60%); }
示例3：設置漸變形狀
div { background: radial-gradient(circle, red, yellow, green); }
div { background: radial-gradient(ellipse, red, yellow, green); }
circle：漸變為最大的圓形； ellipse：根據元素形狀漸變，元素為正方形是顯示效果與circle無異。
示例4：不同尺寸的漸變
size指定了漸變的大小，即漸變到哪里停止，它有四個值。
closest-side：最近邊； farthest-side：最遠邊； closest-corner：最近角； farthest-corner：最遠角
div { background: radial-gradient(60% 40%, closest-side, blue, green, yellow, black); }
div { background: radial-gradient(60% 40%, farthest-side, blue, green, yellow, black); }
div { background: radial-gradient(60% 40%, closest-corner, blue, green, yellow, black); }
div { background: radial-gradient(60% 40%, farthest-corner, blue, green, yellow, black); }
3、重復漸變
（1）重復性線性漸變
div { background: repeating-linear-gradient(red, yellow 10%, green 20%); }
說明：10%的位置為yellow，20%的位置為green，然后按照這20%向下重復
（2）重復性徑向漸變
div { background: repeating-radial-gradient(red, yellow 10%, green 20%); }
：測試瀏覽器版本號——chrome 75.0.3770.80；opera 60.0.3255.109；firefox 67.0；ie 11。
之前《CSS之漸變效果的實現》中有講到邊框顏色漸變，但是只有講最普通的邊框漸變，其作用于圓角邊框漸變時會覆蓋掉圓角的效果，這不是我們預期的，所以我們需要尋找其他的方法解決這個需求。
當盒子同時設置圓角（radius）和漸變時，圓角失效，因此不能用這種方式來實現圓角邊框顏色漸變。我們可以使用下面三個方法實現
1 使用背景重疊
在此之前我們先來看看三個跟背景有關的屬性background-origin,background-clip,background-size。
background-origin表示的是背景起始位置，其三個值如下，依次是
background-origin: border-box | padding-box(默認) | content-box
background-clip表示的是背景填充位置，其四個值如下，依次是
background-clip: border-box(默認) | padding-box | content-box | text
background-size表示的是背景尺寸，其五個值如下，依次是
background-size: contain | cover | <length> | <percentage> | auto(默認)
以下面代碼為例
div {
width: 900px;
height: 300px;
margin: 10px;
padding: 30px;
border:50px solid transparent;
background-origin:border-box;
background-clip: content-box,padding-box, border-box;
background-size: contain,50px 50px,cover;
background-image:url("css.jpg"),linear-gradient(yellow, green),url("css.jpg");
}
效果如圖
由上面的例子我們可以看出：
有了上述的知識，我們現在可以實現我們的需求了，其主要原理是利用背景重疊，第一個背景設置范圍為padding和content，第二個背景設置范圍為border，padding和content，那么第二個背景只有border顯示，其中padding和content被第一個背景覆蓋。
話不多說，上代碼
div {
width: 900px;
height: 300px;
margin: 10px;
padding: 30px;
border-radius: 50px; /*設置圓角*/
border:50px solid transparent; /*設置邊框顏色透明，確保背景漸變色顯示*/
background-origin:border-box; /*從邊框開始背景圖*/
background-clip: padding-box, border-box; /*設置第一個背景和第二個背景的范圍*/
background-size: cover;
/*由于背景圖像不能設置純色，所以可以使用下面的方式設置純色*/
background-image:linear-gradient(#fff, #fff),linear-gradient(yellow, green);
}
效果如圖
2 使用偽元素
讓我們先來看代碼
div {
width: 900px;
height: 300px;
margin: 10px;
padding: 30px;
border-radius: 50px; /*設置圓角*/
border:50px solid transparent; /*設置邊框顏色透明，確保背景漸變色顯示*/
background-clip: padding-box; /*確保此北京范圍為內邊距內*/
background: #fff;
}
div::after {
position: absolute;
/*以div的content為基準往外擴border的寬度*/
top: -50px;
bottom: -50px;
left: -50px;
right: -50px;
border-radius: 50px;
/*設置偽元素背景漸變色*/
background-image: linear-gradient(yellow, green);
content: '';
/*利用層疊將div部分背景置頂*/
z-index: -1;
}
效果如下圖，與方法1中效果相同
3 使用遮罩
使用遮罩，顧名思義就是在div外面加一層div，其大小正好比里面的div大border的寬度，通過外面div的背景漸變來模擬圓角邊框漸變。
具體代碼如下：
/*內部div樣式*/
.inside {
width: 960px;
height: 360px;
margin: 10px;
padding: 0px;
border-radius: 50px; /*設置圓角*/
border:50px solid transparent; /*設置邊框顏色透明，確保背景漸變色顯示*/
background-origin:border-box; /*從邊框開始背景圖*/
background-image: linear-gradient(yellow, green);
}
/*外部div樣式*/
.outside {
background: #fff;
width: calc(100% - 60px);
height: calc(100% - 60px);
padding: 30px;
}
效果如下圖，與方法1中效果相同
注意
在實驗過程中有以下幾點需要注意：
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
