一：簡介
在上篇文章中，我們利用css的mix-blend-mode屬性做了一個簡單的文字顏色自適應背景顏色的效果，這篇文章我來解釋一下這個屬性的用法以及一些簡單的案例。
二：介紹
mix-blend-mode 是一種 CSS 屬性，它定義了一個元素的顏色如何與其父元素的顏色以及兄弟元素的顏色混合。它允許您創(chuàng)建令人驚艷的視覺效果，可以用于創(chuàng)建半透明效果、添加陰影、制作圖片蒙版和很多其他效果。
具體來說，mix-blend-mode 定義了兩個元素之間的顏色混合模式。該屬性接受許多不同的值，接下來我會逐個介紹。
- normal
默認值。使用正常的顏色混合模式。- multiply
將兩個顏色的值相乘，得到一個更暗的顏色。這通常用于創(chuàng)建陰影效果。- screen
將兩個顏色的值相加，然后減去相乘的值，得到一個更亮的顏色。這通常用于創(chuàng)建高光效果。- overlay
根據(jù)背景顏色的亮度來選擇顏色混合模式。如果背景顏色較暗，則使用 multiply 模式；如果背景顏色較亮，則使用 screen 模式。- darken
將兩個顏色的值比較，使用較暗的那個顏色。- lighten
將兩個顏色的值比較，使用較亮的那個顏色。- color-dodge
將前景色分解為 RGB 分量，并將每個分量分別除以（1 減去背景色的對應分量）。然后將每個分量限制在 0 到 1 之間，并使用限制后的前景色作為混合色。- color-burn
將前景色分解為 RGB 分量，并將每個分量分別除以背景色的對應分量。然后將每個分量限制在 0 到 1 之間，并使用限制后的前景色作為混合色。- difference
將前景色減去背景色的值，并取絕對值。這會導致一個反相的效果。- exclusion
將前景色和背景色的值相加，然后減去相乘的值的兩倍。這通常用于創(chuàng)建反相效果。- hue
將前景色的色相（Hue）與背景色的飽和度（Saturation）和亮度（Lightness）混合。這可以用于在不改變亮度和飽和度的情況下改變顏色。- saturation
將前景色的飽和度與背景色的色相和亮度混合。這可以用于在不改變顏色的情況下改變飽和度。- color
將前景色的色相、飽和度和亮度與背景色混合。這可以用于在改變所有顏色屬性的情況下改變前景色的顏色。- luminosity
將前景色的亮度與背景色的色相和飽和度混合。這可以用于在不改變顏色的情況下改變亮度。- mix-blend-mode
屬性可以應用于任何具有背景顏色或背景圖像的元素，包括文本、圖像和 SVG 圖形。通常情況下，您會將 mix-blend-mode 應用于子元素，使其與父元素或其他兄弟元素混合。
三：注意
在混合模式中，元素的顏色值可以是任何一種表示顏色的方式，包括十六進制值、RGB值、RGBA值等。當進行混合計算時，CSS會將兩個元素的顏色值轉(zhuǎn)換成標準的RGBA表示方式，并根據(jù)混合模式算法對這兩個顏色值進行計算，最終生成一個新的RGBA顏色值。混合模式中的算法涉及到了數(shù)學計算，不同的算法使用不同的計算公式。以 multiply 算法為例，它的計算公式是將兩個顏色值的每個通道（即紅、綠、藍、透明度四個通道）分別相乘，得到新的顏色值的每個通道。
-
rgb(255,255,0)與一個rgb(0,255,0)相加
兩個顏色值相加通常是通過混合模式中的color算法實現(xiàn)的。這個算法將兩個顏色值的每個通道（即紅、綠、藍三個通道）進行相加，然后將結(jié)果截取到最大值255以內(nèi)，得到新的顏色值的每個通道。如果通道相加的結(jié)果超過了255，則將結(jié)果截取到255。因為每個通道的值都在0-255之間，所以相加的結(jié)果也應該在這個范圍內(nèi)。
因此，將rgb(255, 255, 0)與rgb(0, 255, 0)相加的結(jié)果為rgb(255, 255, 0)，因為紅色通道相加為255，綠色通道相加為255，藍色通道相加為0，符合上述算法。
-
rgb(255,255,0)與一個rgb(0,255,0)相乘
兩個顏色值相乘通常是通過混合模式中的multiply算法實現(xiàn)的。這個算法將兩個顏色值的每個通道（即紅、綠、藍三個通道）進行相乘，然后將結(jié)果除以255，得到新的顏色值的每個通道。如果通道相乘的結(jié)果超過了255，則將結(jié)果除以255后截取到1以內(nèi)。
因此，將rgb(255, 255, 0)與rgb(0, 255, 0)相乘的結(jié)果為rgb(0, 255, 0)，因為紅色通道相乘為0，綠色通道相乘為255，藍色通道相乘為0，符合上述算法。
四：案例
以下用幾個簡單的例子來用一下比較常用的屬性值
1. mix-blend-mode: multiply;
此屬性值會將兩個圖層的顏色值相乘，產(chǎn)生一種暗色調(diào)的效果。以下是一個簡單的例子：
.parent {
background-image: url('background-image.jpg');
background-color: #000000;
mix-blend-mode: multiply;
}
.child {
background-image: url('foreground-image.png');
}
這個例子中，父元素的背景圖和顏色會與子元素的背景圖進行相乘，產(chǎn)生一種暗色調(diào)的效果。
2. mix-blend-mode: screen;
此屬性值會將兩個圖層的顏色值進行屏幕混合，產(chǎn)生一種亮色調(diào)的效果。以下是一個簡單的例子：
.parent {
background-image: url('background-image.jpg');
background-color: #ffffff;
mix-blend-mode: screen;
}
.child {
background-image: url('foreground-image.png');
}
這個例子中，父元素的背景圖和顏色會與子元素的背景圖進行屏幕混合，產(chǎn)生一種亮色調(diào)的效果。
3.mix-blend-mode: overlay;
此屬性值會將兩個圖層進行疊加混合，產(chǎn)生一種高亮度的效果。以下是一個簡單的例子：
.parent {
background-image: url('background-image.jpg');
background-color: #ffffff;
mix-blend-mode: overlay;
}
.child {
background-image: url('foreground-image.png');
}
這個例子中，父元素的背景圖和顏色會與子元素的背景圖進行疊加混合，產(chǎn)生一種高亮度的效果。
4.mix-blend-mode: difference;
此屬性值會將兩個圖層的顏色值進行差值計算，產(chǎn)生一種反色效果。以下是一個簡單的例子：
.parent {
background-image: url('background-image.jpg');
mix-blend-mode: difference;
}
.child {
background-image: url('foreground-image.png');
}
這個例子中，父元素的背景圖和子元素的背景圖進行差值計算，產(chǎn)生一種反色效果。
5.mix-blend-mode: hue;
此屬性值會將兩個圖層的色相進行混合，產(chǎn)生一種顏色平衡的效果。以下是一個簡單的例子：
.parent {
background-image: url('background-image.jpg');
mix-blend-mode: hue;
}
.child {
background-image: url('foreground-image.png');
}
這個例子中，父元素的背景圖和子元素的背景圖進行色相混合，產(chǎn)生一種顏色平衡的效果。
6.mix-blend-mode: luminosity;
此屬性值會將兩個圖層的亮度進行混合，產(chǎn)生一種亮度平衡的效果。以下是一個簡單的例子：
.parent {
background-image: url('background-image.jpg');
mix-blend-mode: luminosity;
}
.child {
background-image: url('foreground-image.png');
}
這個例子中，父元素的背景圖和子元素的背景圖進行亮度混合，產(chǎn)生一種亮度平衡的效果。
7.mix-blend-mode: color-dodge;
此屬性值會將兩個圖層的顏色值進行顏色減淡計算，產(chǎn)生一種顏色亮度較高的效果。以下是一個簡單的例子：
.parent {
background-image: url('background-image.jpg');
mix-blend-mode: color-dodge;
}
.child {
background-image: url('foreground-image.png');
}
這個例子中，父元素的背景圖和子元素的背景圖進行顏色減淡計算，產(chǎn)生一種顏色亮度較高的效果。文章來源：http://www.zghlxwxcb.cn/news/detail-735392.html
五：總結(jié)
以上就是mix-blend-mode屬性的詳解，歡迎提出問題。文章來源地址http://www.zghlxwxcb.cn/news/detail-735392.html
到了這里，關(guān)于CSS3 -- mix-blend-mode屬性詳解的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
