標簽定義及使用說明

mix-blend-mode 屬性描述了元素的內容應該與元素的直系父元素的內容和元素的背景如何混合。

語法

mix-blend-mod:

使用mix-blend-mode 各種混合模式實例

注意:??Internet Explorer 或 Edge 瀏覽器不支持 mix-blend-mode 屬性。

（還是那個熟悉的小姑娘！嘿嘿！）通過下面的實例，我們可以看到，圖片與不同顏色的背景色進行混合的效果是可以預期的，但圖片本身的色彩豐富程度決定了最終輸出的效果。

.normal {mix-blend-mode: normal;}
.multiply {mix-blend-mode: multiply;}
.screen {mix-blend-mode: screen;}
.overlay {mix-blend-mode: overlay;}
.darken {mix-blend-mode: darken;}
.lighten {mix-blend-mode: lighten;}
.color-dodge {mix-blend-mode: color-dodge;}
.color-burn {mix-blend-mode: color-burn;}
.difference {mix-blend-mode: difference;}
.exclusion {mix-blend-mode: exclusion;}
.hue {mix-blend-mode: hue;}
.saturation {mix-blend-mode: saturation;}
.color {mix-blend-mode: color;}
.luminosity {mix-blend-mode: luminosity;}

應用方法

/* 外容器div 是紅色背景，圖片里調用的 class 就是圖片混合效果的類  */
<div class="red" ><img src="child.jpg" class="multiply" >
</div>

與紅色混合的實例

與藍色混合的實例

與黃色混合的實例

與綠色混合實例

其他混合實例

場景一：在復雜多彩的圖片上，放置文字。利用 overlay模式，實現文字增強效果，實現文字與圖像的和諧混合，提高閱讀便利。

場景二：在一個元素上方疊加多個彩色透明圖形，創造出一種抽象藝術的效果。使用mix-blend-mode的multiply模式可以實現這一目標。

場景二：在用戶界面設計中，希望用戶在鼠標懸浮到按鈕上時有明顯的視覺反饋。將mix-blend-mode與偽類:hover相結合，創建獨特的交互效果。

<p class="text_wave">WAVE</p>

/* 案例3 的CSS樣式表：用CSS的 mix-blend-mode 屬性與偽類相結合制作漂亮的水波效果*/
.text_wave {width: 100%;position: relative;font-size: 160px;font-weight: bold;background: #fff;color: #000;overflow: hidden;&::before,&::after {content: "";position: absolute;top: -923px;left: 50%;width: 2000px;height: 2000px;border-radius: 45% 48% 43% 47%;transform: translate(-50%, -50%);background: rgba(3, 169, 244, .85);animation: rotate 10s infinite linear;z-index: 1;mix-blend-mode: lighten;}&::after {border-radius: 43% 47% 44% 48%;animation: rotate 10s infinite .5s linear;}
}@keyframes rotate {0% {transform: translate(-50%, -50%) rotate(0);}100% {transform: translate(-50%, -50%) rotate(360deg);}
}

本文介紹完畢，希望您喜歡！嗯，收藏+點贊+評論！謝謝！