我試圖使用CSS mix-blend-mode
來使這個文本躲避在背景圖像上,但CSS似乎只能在div的背景上工作。我以前見過它在文本上工作,所以爲什麼它不在這裏工作?爲什麼混合混合模式不能處理CSS中的字體/文本?
#draggable { mix-blend-mode: color-dodge; }
演示:http://codepen.io/anon/pen/YyJGzo
我試圖使用CSS mix-blend-mode
來使這個文本躲避在背景圖像上,但CSS似乎只能在div的背景上工作。我以前見過它在文本上工作,所以爲什麼它不在這裏工作?爲什麼混合混合模式不能處理CSS中的字體/文本?
#draggable { mix-blend-mode: color-dodge; }
演示:http://codepen.io/anon/pen/YyJGzo
您正在使用(文本顏色和混合模式)的設置是不引人注意
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;
}
屏幕只是一個不同的設置。你是什麼意思,它不明顯? –
我的意思是,任何顏色的白色,並與彩色燒傷混合,將永遠白色,這就是你得到的。我添加了一個希望是你想要的例子。 – vals
你可以在你的答案中加入一些關於白色的東西嗎?謝謝! –
我想'混合 - 共混 - mode'不會爲工作可拖動的元素,儘量不要拖動。 – Raviteja
@Raviteja不,它適用於div的背景 –