爲什麼混合混合模式不能處理CSS中的字體/文本？

Question

我試圖使用CSS mix-blend-mode來使這個文本躲避在背景圖像上，但CSS似乎只能在div的背景上工作。我以前見過它在文本上工作，所以爲什麼它不在這裏工作？

#draggable { mix-blend-mode: color-dodge; } 

演示：http://codepen.io/anon/pen/YyJGzo

Answer 1

您正在使用（文本顏色和混合模式）的設置是不引人注意

從w3c page

10.1.8。色彩混合模式

使背景顏色變暗以反映源顏色。用 白色繪畫沒有改變。

如果（CB == 1）

B(Cb, Cs) = 1 

否則如果（CS == 0）

B(Cb, Cs) = 0 

別的

B(Cb, Cs) = 1 - min(1, (1 - Cb)/Cs) 

在哪裏的Cb == 1指白色在背景（您的案例中的文字）和B（Cb，Cs）= 1意味着結果顏色保持白色。 （如果沒有任何背景的貢獻）

嘗試

#draggable{ 
    color: green; 
    mix-blend-mode: screen; 
} 

或

#draggable{ 
    color: grey; 
} 

演示codepen with grey text 例如