1. 使用場景

往往開發過程中，經常遇到產品說你這個背景圖和文字顏色太接近了，能不能適配下背景圖，讓用戶能夠看清具體內容是啥。

這么說吧，這種需求場景非常合理，因為你做開發就是要給用戶一個交代，給他們更好的人機交互是每一個前端的最高追求。

2. css解決方案

廢話不多說，直接設置子節點的css樣式 mix-blend-mode 的值為 difference 即可。

<div class="parent"><div class="child">內容</div>
</div>

.parent{background-color: #000；
}
.child{color: red;mix-blend-mode: difference;
}

無論背景圖還是背景色都是生效的。

3. 不生效原因

要么你看下css樣式設置是否正確，要么就是你調試的瀏覽器不支持。

4. 具體介紹

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

相關值名稱樣式。

/* 關鍵字值 */
mix-blend-mode: normal;
mix-blend-mode: multiply;
mix-blend-mode: screen;
mix-blend-mode: overlay;
mix-blend-mode: darken;
mix-blend-mode: lighten;
mix-blend-mode: color-dodge;
mix-blend-mode: color-burn;
mix-blend-mode: hard-light;
mix-blend-mode: soft-light;
mix-blend-mode: difference;
mix-blend-mode: exclusion;
mix-blend-mode: hue;
mix-blend-mode: saturation;
mix-blend-mode: color;
mix-blend-mode: luminosity;
mix-blend-mode: plus-darker;
mix-blend-mode: plus-lighter;/* 全局值 */
mix-blend-mode: inherit;
mix-blend-mode: initial;
mix-blend-mode: revert;
mix-blend-mode: revert-layer;
mix-blend-mode: unset;

求關注