0

所以我有一个在我的网站中使用的自定义光标。mix-blend-mode: exclusion

光标的原始颜色（不考虑mix-blend-mode）是cyan，并且它下面的大多数元素是white、或black，因此您可以看到的颜色有这些：bluemagenta

body {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  height: 100vh;
  overflow: hidden;
}

.box {
  width: 50vw;
  height: 50vh;
}

.circle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 25vh;
  width: 50vh;
  height: 50vh;
  mix-blend-mode: difference;
  background: #0FF;
}
<div class="box" style="background: #FFF;"></div>
<div class="box" style="background: #00F;"></div>
<div class="box" style="background: #000;"></div>
<div class="box" style="background: #F0F;"></div>
<div class="circle"></div>

然而，这在 Chrome 中看起来与在 Firefox 中不同。

铬 ( Version 81.0.4044.113 (Official Build) (64-bit)):

在此处输入图像描述

火狐 ( Version 75.0 (64-bit)):

在此处输入图像描述

我想知道是否有办法让两者看起来一样。

我一直在玩弄mix-blend-mode( exclusion，特别是) 和的其他值filter，但我无法让两者看起来一致并保持类似的行为。

有趣的是，如果您更改光标的颜色（.circle在示例中），它适用于大多数其他值...

4

0 回答 0