2015-11-07 73 views
0

我試圖使用CSS mix-blend-mode來使這個文本躲避在背景圖像上,但CSS似乎只能在div的背景上工作。我以前見過它在文本上工作,所以爲什麼它不在這裏工作?爲什麼混合混合模式不能處理CSS中的字體/文本?

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

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

+0

我想'混合 - 共混 - mode'不會爲工作可拖動的元素,儘量不要拖動。 – Raviteja

+0

@Raviteja不,它適用於div的背景 –

回答

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 例如

+0

屏幕只是一個不同的設置。你是什​​麼意思,它不明顯? –

+0

我的意思是,任何顏色的白色,並與彩色燒傷混合,將永遠白色,這就是你得到的。我添加了一個希望是你想要的例子。 – vals

+0

你可以在你的答案中加入一些關於白色的東西嗎?謝謝! –