白色和蓝色混合混合模式

假设我有蓝色和白色背景。我希望我的文本在背景为白色时为黑色，在背景为蓝色时为白色。白色和蓝色混合混合模式

我已经试过：

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

白色和蓝色混合混合模式

回答

相关问题