CSS漸變和混合

CSS漸變

要點

顏色、方向和位置

linear-gradient

// 一般寫法，可以有一個以上的color
linear-gradient(角度deg, color1 color-stop?長度px||百分比, color2 color-stop?長度px||百分比)

線性漸變中的角度默認是從下到上的垂直方向開始順時針進行旋轉的。老版本瀏覽器有差別。

radial-gradient

// 一般寫法，可以有一個以上的color
radial-gradient(<shape?>||<size? at position?>, color1 color-stop?長度px||百分比, color2 color-stop?長度px||百分比)

shape形狀

• circle 圓形
• ellipse 橢圓形

size尺寸大小，隱式聲明形狀

• closest-side （指定徑向漸變的半徑長度爲從圓心到離圓心最近的邊）
• closest-corner （指定徑向漸變的半徑長度爲從圓心到離圓心最近的角）
• farthest-side （指定徑向漸變的半徑長度爲從圓心到離圓心最遠的邊）
• farthest-corner （指定徑向漸變的半徑長度爲從圓心到離圓心最遠的角）

也可以用數值來表示,

只傳入一個大小參數，則表示該漸變形狀爲圓,

radial-gradient(60px,#f00 0%,#ff0 100%);// 半徑大小爲60px

傳入兩個大小不同的參數，則表示該漸變形狀爲橢圓

radial-gradient(60% 50%,#f00 0%,#ff0 100%);// x軸爲60%， y軸爲50%, 大小區分長短半軸,

若漸變形狀爲圓形，則該漸變大小不能爲百分數，而橢圓既可以爲具體數值也可以爲百分數

position 圓心位置

具體數值（或百分數）x(自左而右) y(自上而下) || 方位名稱(center, top, …)

radial-gradient(150% 210% at 100% 0%, #f00 0%,#ff0 100%)

注意： 圓心位置參數一定要置於radial-gradient()第一個參數的末尾

柔色混合漸變示例

1. background: linear-gradient(115deg, rgb(211, 255, 215) 0%, rgb(0, 0, 0) 100%), 
   radial-gradient(90% 100% at 50% 0%, rgb(200, 200, 200) 0%, rgb(22, 0, 45) 100%), radial-gradient(100% 100% at 80% 0%, rgb(250, 255, 0) 0%, rgb(36, 0, 0) 100%), 
   radial-gradient(150% 210% at 100% 0%, rgb(112, 255, 0) 0%, rgb(20, 175, 125) 0%, rgb(0, 10, 255) 100%), 
   radial-gradient(100% 100% at 100% 30%, rgb(255, 77, 0) 0%, rgba(0, 200, 255, 1) 100%), linear-gradient(60deg, rgb(255, 0, 0) 0%, rgb(120, 86, 255) 100%);
   background-blend-mode: overlay, overlay, difference, difference, difference, normal;
   

2. background: linear-gradient(180deg, #F7D6FF 0%, #005686 100%), 
   linear-gradient(180deg, #FFFFFF 0%, #060046 100%), 
   linear-gradient(130deg, #00FFA3 0%, #1A003C 100%), 
   linear-gradient(307deg, #FF0000 0%, #3300C6 100%), 
   radial-gradient(50% 72% at 50% 50%, #004584 0%, #00FFB2 100%), 
   radial-gradient(100% 140% at 100% 0%, #5ED500 0%, #2200AA 100%);
   background-blend-mode: soft-light, overlay, difference, difference, color-burn,normal;
   

3. 示例2旋轉180度

   background: 
   linear-gradient(0deg, #F7D6FF 0%, #005686 100%), 
   linear-gradient(0deg, #FFFFFF 0%, #060046 100%), 
   linear-gradient(310deg, #00FFA3 0%, #1A003C 100%), 
   linear-gradient(127deg, #FF0000 0%, #3300C6 100%), 
   radial-gradient(50% 72% at 50% 50%, #004584 0%, #00FFB2 100%), 
   radial-gradient(100% 140% at 0% 100%, #5ED500 0%, #2200AA 100%);
     background-blend-mode: soft-light, overlay, difference, difference, color-burn, normal;
   

blend-mode

**blend-mode**是一種 CSS 數據類型，用於描述當元素重疊時，顏色應當如何呈現。它被用於 background-blend-mode 和 mix-blend-mode 屬性。

混合模式應該按background屬性同樣的順序定義。如果混合模式數量與背景圖像的數量不相等，它會被截取至相等的數量。

當層重疊時，混合模式是計算像素最終顏色值的方法，每種混合模式採用前景和背景的顏色值，執行其計算並返回最終的顏色值。最終的可見層是對混合層中的每個重疊像素執行混合模式計算的結果。

normal

最終顏色永遠是頂層顏色，無論底層顏色是什麼。
其效果類似於兩張不透明的紙重疊（overlapping）在一起。

multiply

最終顏色爲頂層顏色與底層顏色相乘的結果。
如果疊加黑色層，則最終層必爲黑色層，疊加白色層不會造成變化。
其效果類似於在透明薄膜上重疊印刷的兩個圖像。

screen

最終的顏色是反轉頂層顏色和底層顏色，將反轉後的兩個顏色相乘，再反轉相加得到的和得到的結果。
黑色層不會造成變化，白色層導致白色最終層。
其效果類似於（被投影儀）投射到投影屏幕上的兩個圖像。

overlay

如果底層顏色比頂層顏色深，則最終顏色是 multiply 的結果，如果底層顏色比頂層顏色淺，則最終顏色是 screen 的結果。
此混合模式相當於頂層與底層互換後的 hard-light。

darken

最終顏色是由每個顏色通道下，頂底兩層顏色中的最暗值所組成的顏色。

lighten

最終顏色是每個顏色通道下，頂底兩層顏色中的最亮值所組成的顏色。

color-dodge

最終顏色是將底部顏色除以頂部顏色的反色的結果。
黑色前景不會造成變化。前景如果是背景的反色，會得到白色（fully lit color，完全亮起的顏色，應當爲白色）。
此混合模式類似於 screen，但是，前景只需要和背景的反色一樣亮，最終圖像就會變爲全白。

color-burn

最終顏色是反轉底部顏色，將反轉後的值除以頂部顏色，再反轉除以後的值得到的結果。
白色的前景不會導致變化，前景如果是背景的反色，會得到黑色。
此混合模式類似於 multiply，但是，前景只需要和背景的反色一樣暗，最終圖像就會變爲全黑。

hard-light

如果頂層顏色比底層顏色深，則最終顏色是 multiply 的結果，如果頂層顏色比底層顏色淺，則最終顏色是 screen 的結果。
此混合模式相當於頂層與底層互換後的 overlay。
其效果類似於在背景層上（用前景層）打出一片刺眼的聚光燈。

soft-light

最終顏色類似於 hard-light 的結果，但更加柔和一些。
此混合模式的表現類似 hard-light。
其效果類似於在背景層上（用前景層）打出一片發散的聚光燈。

difference

最終顏色是 兩種顏色中較淺的顏色 減去 兩種顏色中較深的顏色 得到的結果。
黑色層不會造成變化，而白色層會反轉另一層的顏色。

exclusion

最終顏色類似於 difference，但對比度更低一些。
和 difference 相同，黑色層不會造成變化，而而白色層會反轉另一層的顏色。

hue

最終顏色由頂部顏色的色調和底部顏色的飽和度與亮度組成。

saturation

最終顏色由頂部顏色的色調和底部顏色的飽和度與發光度組成。
飽和度爲零的純灰色背景層不會造成變化。

color

最終顏色由頂部顏色的色調與飽和度和底部顏色的亮度組成。
此效果保留了灰度級別，可用於爲前景着色。

luminosity

最終顏色由頂部顏色的亮度和底部顏色的色調和飽和度組成。
此混合模式相當於頂層與底層互換後的 color。# CSS漸變

要點

顏色、方向和位置

linear-gradient

// 一般寫法，可以有一個以上的color
linear-gradient(角度deg, color1 color-stop?長度px||百分比, color2 color-stop?長度px||百分比)

線性漸變中的角度默認是從下到上的垂直方向開始順時針進行旋轉的。老版本瀏覽器有差別。

radial-gradient

// 一般寫法，可以有一個以上的color
radial-gradient(<shape?>||<size? at position?>, color1 color-stop?長度px||百分比, color2 color-stop?長度px||百分比)

shape形狀

• circle 圓形
• ellipse 橢圓形

size尺寸大小，隱式聲明形狀

• closest-side （指定徑向漸變的半徑長度爲從圓心到離圓心最近的邊）
• closest-corner （指定徑向漸變的半徑長度爲從圓心到離圓心最近的角）
• farthest-side （指定徑向漸變的半徑長度爲從圓心到離圓心最遠的邊）
• farthest-corner （指定徑向漸變的半徑長度爲從圓心到離圓心最遠的角）

也可以用數值來表示,

只傳入一個大小參數，則表示該漸變形狀爲圓,

radial-gradient(60px,#f00 0%,#ff0 100%);// 半徑大小爲60px

傳入兩個大小不同的參數，則表示該漸變形狀爲橢圓

radial-gradient(60% 50%,#f00 0%,#ff0 100%);// x軸爲60%， y軸爲50%, 大小區分長短半軸,

若漸變形狀爲圓形，則該漸變大小不能爲百分數，而橢圓既可以爲具體數值也可以爲百分數

position 圓心位置

具體數值（或百分數）x(自左而右) y(自上而下) || 方位名稱(center, top, …)

radial-gradient(150% 210% at 100% 0%, #f00 0%,#ff0 100%)

注意： 圓心位置參數一定要置於radial-gradient()第一個參數的末尾

柔色混合漸變示例

1. background: linear-gradient(115deg, rgb(211, 255, 215) 0%, rgb(0, 0, 0) 100%), 
   radial-gradient(90% 100% at 50% 0%, rgb(200, 200, 200) 0%, rgb(22, 0, 45) 100%), radial-gradient(100% 100% at 80% 0%, rgb(250, 255, 0) 0%, rgb(36, 0, 0) 100%), 
   radial-gradient(150% 210% at 100% 0%, rgb(112, 255, 0) 0%, rgb(20, 175, 125) 0%, rgb(0, 10, 255) 100%), 
   radial-gradient(100% 100% at 100% 30%, rgb(255, 77, 0) 0%, rgba(0, 200, 255, 1) 100%), linear-gradient(60deg, rgb(255, 0, 0) 0%, rgb(120, 86, 255) 100%);
   background-blend-mode: overlay, overlay, difference, difference, difference, normal;
   

2. background: linear-gradient(180deg, #F7D6FF 0%, #005686 100%), 
   linear-gradient(180deg, #FFFFFF 0%, #060046 100%), 
   linear-gradient(130deg, #00FFA3 0%, #1A003C 100%), 
   linear-gradient(307deg, #FF0000 0%, #3300C6 100%), 
   radial-gradient(50% 72% at 50% 50%, #004584 0%, #00FFB2 100%), 
   radial-gradient(100% 140% at 100% 0%, #5ED500 0%, #2200AA 100%);
   background-blend-mode: soft-light, overlay, difference, difference, color-burn,normal;
   

3. 示例2旋轉180度

   background: 
   linear-gradient(0deg, #F7D6FF 0%, #005686 100%), 
   linear-gradient(0deg, #FFFFFF 0%, #060046 100%), 
   linear-gradient(310deg, #00FFA3 0%, #1A003C 100%), 
   linear-gradient(127deg, #FF0000 0%, #3300C6 100%), 
   radial-gradient(50% 72% at 50% 50%, #004584 0%, #00FFB2 100%), 
   radial-gradient(100% 140% at 0% 100%, #5ED500 0%, #2200AA 100%);
     background-blend-mode: soft-light, overlay, difference, difference, color-burn, normal;
   

blend-mode

**blend-mode**是一種 CSS 數據類型，用於描述當元素重疊時，顏色應當如何呈現。它被用於 background-blend-mode 和 mix-blend-mode 屬性。

混合模式應該按background屬性同樣的順序定義。如果混合模式數量與背景圖像的數量不相等，它會被截取至相等的數量。

當層重疊時，混合模式是計算像素最終顏色值的方法，每種混合模式採用前景和背景的顏色值，執行其計算並返回最終的顏色值。最終的可見層是對混合層中的每個重疊像素執行混合模式計算的結果。

normal

最終顏色永遠是頂層顏色，無論底層顏色是什麼。
其效果類似於兩張不透明的紙重疊（overlapping）在一起。

multiply

最終顏色爲頂層顏色與底層顏色相乘的結果。
如果疊加黑色層，則最終層必爲黑色層，疊加白色層不會造成變化。
其效果類似於在透明薄膜上重疊印刷的兩個圖像。

screen

最終的顏色是反轉頂層顏色和底層顏色，將反轉後的兩個顏色相乘，再反轉相加得到的和得到的結果。
黑色層不會造成變化，白色層導致白色最終層。
其效果類似於（被投影儀）投射到投影屏幕上的兩個圖像。

overlay

如果底層顏色比頂層顏色深，則最終顏色是 multiply 的結果，如果底層顏色比頂層顏色淺，則最終顏色是 screen 的結果。
此混合模式相當於頂層與底層互換後的 hard-light。

darken

最終顏色是由每個顏色通道下，頂底兩層顏色中的最暗值所組成的顏色。

lighten

最終顏色是每個顏色通道下，頂底兩層顏色中的最亮值所組成的顏色。

color-dodge

最終顏色是將底部顏色除以頂部顏色的反色的結果。
黑色前景不會造成變化。前景如果是背景的反色，會得到白色（fully lit color，完全亮起的顏色，應當爲白色）。
此混合模式類似於 screen，但是，前景只需要和背景的反色一樣亮，最終圖像就會變爲全白。

color-burn

最終顏色是反轉底部顏色，將反轉後的值除以頂部顏色，再反轉除以後的值得到的結果。
白色的前景不會導致變化，前景如果是背景的反色，會得到黑色。
此混合模式類似於 multiply，但是，前景只需要和背景的反色一樣暗，最終圖像就會變爲全黑。

hard-light

如果頂層顏色比底層顏色深，則最終顏色是 multiply 的結果，如果頂層顏色比底層顏色淺，則最終顏色是 screen 的結果。
此混合模式相當於頂層與底層互換後的 overlay。
其效果類似於在背景層上（用前景層）打出一片刺眼的聚光燈。

soft-light

最終顏色類似於 hard-light 的結果，但更加柔和一些。
此混合模式的表現類似 hard-light。
其效果類似於在背景層上（用前景層）打出一片發散的聚光燈。

difference

最終顏色是 兩種顏色中較淺的顏色 減去 兩種顏色中較深的顏色 得到的結果。
黑色層不會造成變化，而白色層會反轉另一層的顏色。

exclusion

最終顏色類似於 difference，但對比度更低一些。
和 difference 相同，黑色層不會造成變化，而而白色層會反轉另一層的顏色。

hue

最終顏色由頂部顏色的色調和底部顏色的飽和度與亮度組成。

saturation

最終顏色由頂部顏色的色調和底部顏色的飽和度與發光度組成。
飽和度爲零的純灰色背景層不會造成變化。

color

最終顏色由頂部顏色的色調與飽和度和底部顏色的亮度組成。
此效果保留了灰度級別，可用於爲前景着色。

luminosity

最終顏色由頂部顏色的亮度和底部顏色的色調和飽和度組成。
此混合模式相當於頂層與底層互換後的 color。