白色和藍色混合混合模式

假設我有藍色和白色背景。我希望我的文本在背景爲白色時爲黑色，在背景爲藍色時爲白色。白色和藍色混合混合模式

我已經試過：

mix-blend-mode: difference;

它的工作原理，當它在白色（給了我黑色文本）。但它給了我黃色的文字，否則。

這裏是我現在，這是接近：

來源

2016-02-27 Brandon Bertelsen

這是預期的行爲...不知道你有什麼可以做的。 –

如果你給人一個可玩的玩意，也許有人會偶然發現一個解決方案...... [這裏]（https://jsfiddle.net/MrLister/ffcfu4r9/），我做了一個。不，不是解決方案。 –

Thx @MrLister我在這裏有點超出我的典型境界。我的臨時解決方案是調整背景，以便在CSS中各種不同的'@media {max-width：XXXpx}'規格中白色不會超過白色。 –

不幸的是，mix-blend-mode並沒有真正提供，將適合正是你正在尋找的任何選項。

difference：這會從最淺的顏色中減去兩種顏色中較暗的一種。

所以...如果你的背景色爲藍色rgb(0,0,255);和你的文本顏色爲白色rgb(255,255,255);剩下的就是黃色rgb(255,255,0);

因此，如果我們用黃色text..we藍色背景上的白拿文字和白色的藍色背景......它不是黑色的，但它是我能做的最好的。

JSFiddle Demo

body { 
 
    background: rgb(0, 0, 255); 
 
    overflow: hidden; 
 
} 
 
body::before { 
 
    content: 'o'; 
 
    font: bold 800px'Times', 'Times New Roman'; 
 
    color: white; 
 
    position: absolute; 
 
    left: -.25em; 
 
    top: -.45em; 
 
} 
 
h1 { 
 
    font-size: 40px; 
 
    margin: 3em -3em 0 1em; 
 
    mix-blend-mode: difference; 
 
    color: rgb(255, 255, 0); 
 
}

<h1>Welcome to the fiddle</h1>

帽尖到利斯特先生的起動小提琴。

來源

2016-02-27 11:14:48

白色和藍色混合混合模式

回答

相關問題