在我正在开发的网站上,我使用mix-blend-mode:difference来在某些元素覆盖其他元素时产生有趣的效果。最近我注意到,在我的Macbook Pro显示器上的webkit浏览器中,具有mix-blend-mode:difference的div的颜色在某些特定情况下比它应该的要暗得多。
请看我的codepen:https://codepen.io/matt_o_tron_5000/pen/LYxPaLm HTML:
CSS:
在这段代码中,一个 div 使用普通的十六进制颜色代码作为背景色,另一个 div 使用完全相反的十六进制代码作为背景色,并应用了 mix-blend-mode:difference。
在我的外部显示器上,这两个 div 的颜色完全相同(而且是可靠的色彩准确)。但如果我将窗口移动到我的 MacBook Pro 显示屏上,混合混合模式的 div 会比另一个 div 暗得多。
此外,在 Firefox 中进行测试时,无论我在哪个显示器上查看它们,这两个 div 的颜色都完全匹配。只有在 Safari 和 Chrome 中,div 在我的 Macbook 显示器上看起来意外地暗。
我认为这与 Safari 和 Chrome 使用 WebKit 引擎有关,而 Firefox 使用不同的引擎(Gecko),但是...为什么显示器之间会有差异?我很困惑。
照片示例:
Chrome 中的 2 个 div 在外部显示器上: 在Macbook上的Chrome浏览器中,显示了2个div。
请看我的codepen:https://codepen.io/matt_o_tron_5000/pen/LYxPaLm HTML:
<div class="background">
<div class="plain-color"></div>
<div class="blend-color"></div>
</div>
CSS:
.background {
background-color: #fff;
}
.plain-color,
.blend-color {
width: 200px;
height: 200px;
}
.plain-color {
background-color: #04f;
}
.blend-color {
background-color: #fb0;
mix-blend-mode: difference;
}
在这段代码中,一个 div 使用普通的十六进制颜色代码作为背景色,另一个 div 使用完全相反的十六进制代码作为背景色,并应用了 mix-blend-mode:difference。
在我的外部显示器上,这两个 div 的颜色完全相同(而且是可靠的色彩准确)。但如果我将窗口移动到我的 MacBook Pro 显示屏上,混合混合模式的 div 会比另一个 div 暗得多。
此外,在 Firefox 中进行测试时,无论我在哪个显示器上查看它们,这两个 div 的颜色都完全匹配。只有在 Safari 和 Chrome 中,div 在我的 Macbook 显示器上看起来意外地暗。
我认为这与 Safari 和 Chrome 使用 WebKit 引擎有关,而 Firefox 使用不同的引擎(Gecko),但是...为什么显示器之间会有差异?我很困惑。
照片示例:
Chrome 中的 2 个 div 在外部显示器上: 在Macbook上的Chrome浏览器中,显示了2个div。