问题标签 [mix-blend-mode]

所以我有一个自定义的 js 光标（它跟随鼠标光标有延迟），它的背景颜色为 #000 并且 mix-blend-mode 设置为差异。我的正文背景颜色和文本设置为#fff。现在，我有一个带有文本“HELLO”的 ap 标签，我希望它只显示“H”和“O”这两个词，所以我创建了一个颜色设置为 #000 的跨度。当我将鼠标悬停在 P 标签上时，由于混合模式，我可以看到我想要的“ELL”字样，但“H”和“O”字样变得“不可见”。当光标越过它时，如何使它们可见？（如果光标没有覆盖整个单词，则只是光标悬停的每个单词的一部分，而不是整个单词）

有什么解决办法吗？我试图改变 mouseenter/mouseleave 上“H”和“O”的颜色，但它没有按预期工作。

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

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

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

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

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

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

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

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

这是屏幕混合模式应该做的：

这就是我的 CSS 所做的： https ://codepen.io/Thisisntme/pen/LYGypRz

我究竟做错了什么？

我正在现场工作，我需要为移动到兄弟姐妹上的 div 设置动画并应用mix-blend-mode. 我正在使用一个创建 2 个 div 环绕混合元素的库。该库还向直接父级添加了一个变换，它现在破坏了混合。我认为这可能与堆叠问题有关，但无论我添加多少/在哪里添加transform3d(0,0,0 )混合仍然会损坏。

由于库的限制，我不能对包装器做太多事情，或者背景是最外层包装器的兄弟。

如果您切换 requiredParent2 转换，一切正常（如前所述，此转换是由必需的库添加的）。

此外，混合元素还有兄弟姐妹 ( mixBorder，这会阻止我将混合移动到requiredParents)

小提琴也在这里：https ://jsfiddle.net/hb7qaod6/5/

我已经尝试过似乎只适用于颜色的混合模式，即 colorblendmode。有没有办法实现CSS 的混合混合模式？

这会导致类似： 上面代码的输出

我想 从 CSS 获得输出

我一直在研究 CSS 中的混​​合混合模式，这似乎是一个强大的属性！但是，我对这实际上是如何工作的感到非常困惑。我有不可预测的结果。以这个codepen为例：

https://codepen.io/KingKabir/pen/ONyPeg

正文的背景设置为深色，而其他所有部分的背景设置为白色。

现在尝试将主体的背景颜色更改为白色，并注意菜单没有将其颜色更改为黑色。这里发生了什么？两个部分具有相同的背景颜色？

如果您将第一部分的背景颜色专门设置为白色，它会按预期工作。但如果第一部分没有背景颜色并且正文设置为白色，则不会。结果不应该一样吗？

我在我正在从事的项目中遇到了这个确切的问题，但我无法弄清楚发生了什么。编辑：我使用的是谷歌浏览器 83.0.4103.106

编辑：这是我的意思的图像

我已经阅读了大量关于人们试图制作这种形状的帖子，而我最好的解决方案是使用mix-blend-mode:screen;. 这些帖子已有 5 年以上的历史，所以我希望有一种新的解决方案。

但是，我还需要文本不受mix-blend-mode. 我已经尝试isolation:isolate;过包装<div>，但这并没有帮助，因为圆圈刚刚消失或不会敲掉白色容器，只是与它混合（是的，我意识到这是它应该做的，而不是我需要它做的）。我还尝试将文本单独放置并在桌面上<div>使用position:absolute;时使用，它没有响应并且看起来真的很hacky。

所以，简而言之，我需要在不影响内容的文本颜色的情况下制作下面的内容。

任何帮助是极大的赞赏。

我backdrop-filter: blur在article元素上使用来模糊背景图片，并mix-blend-mode: overlay在h1元素上使用一些颜色。

我期待下面这样的东西（使用Sketch创建的模型），但实际标题总是以灰色阴影出现，而不是预期的不同颜色（使用 Chrome 和 Safari 测试，因为 Firefox 目前尚不backdrop-filter支持）。

预期结果（模型）

复制样本

当 DOM 中较低的另一个元素添加了自己的属性时，我的h1元素失去了它的mix-blend-mode属性，默认返回白色mix-blend-mode。

我很难指出这个问题的根源，因为当容器内的不同元素本身被赋予属性时，它们div似乎正在破坏元素的mix-blend-mode属性（而不是在所述容器中） 。<h1>mix-blend-mode

在 Chrome 和 Firefox 上测试时，我只能在 Chrome 上产生这个问题。由于某种原因，我只能在我的网站上产生这个问题，而不是在 codepen 或任何类似的东西中。

这是我正在开发的网站的草稿（在 Chrome 中打开！）

当您（连续）将鼠标悬停在示例视频元素（播放视频，只需稍等片刻即可开始）上时，h1将失去其mix-blend-mode属性，变为白色。这是我不想要的。我确实希望“视频”文本在您悬停示例视频时获得该mix-blend-mode属性，它已经正确执行，我认为这以某种方式导致了问题。

（在 css 文件中有很多额外的 css 没有附加到任何东西，因为我不得不删除许多 HTML 元素。）

我有一个非常具体的案例，我在这里无法解决。我目前正在尝试实现一个严重依赖渐变和混合模式的设计。我想要达到的效果是黑色变成颜色 1，白色变成颜色 2。

编辑：我的渐变不是标准的线性或径向渐变。我使用带有随机定位元素的不同图层来创建如下所示的有机渐变。

我认为可行的解决方案是使用 SVG<feComponentTransfer>过滤器将我的黑白范围映射到我的两种自定义颜色。mix-blend-mode: difference 当我将它应用到（步骤 2）中的前景元素时效果很好，但是一旦我将它应用到我的黑白渐变背景，CSS 混合模式就会拾取颜色并且双色调效果不再起作用. （第 3 步）

任何有关如何解决该问题的帮助或建议将不胜感激！谢谢