问题标签 [mix-blend-mode]

如果您启动 Chrome 并在全屏模式下检查我的小提琴，您会看到动画滞后。div 向下滑动时滞后一点，文本在向上滑动时滞后一点。如果您将浏览器的大小调整为更小，动画将可以正常播放。我的动画在 Safari 中也能正常播放。

如果删除.light-leaks包含该mix-blend-mode属性的类，动画将运行良好。

问题是什么？谢谢。

全屏模式下的小提琴

我有一个带有一些文本的 div 和一个背景图像，我正在使用 mix-blend-mode: 变暗。然而，背景图像在文本之外流血。我使用 Orbitron-Black 作为字体，但我看不出有什么不同！这是我的代码。

我在这里做了一个小提琴。 小提琴

我想使用 mix-blend-mode 属性使某些特定的 SVG 路径在笔划上采用背景图像，以便路径看起来好像是擦除路径。以下代码是我所达到的。但是，如您所见，mix-blend 属性会影响其他路径，这些路径需要在笔划上没有任何背景图像的情况下出现。因此，我要求一种方法将 mix-blend-mode 属性仅应用于单独的元素组，并使其他元素不受影响。

以下是我所寻求的。

注意：我可以使用屏蔽来做到这一点，但在某些浏览器中它非常慢。

我需要一些帮助在 CSS 中重新创建它（如果可能的话）：

这是我到目前为止所拥有的：

有一个带有背景图像的 div，覆盖该 div 的是另一个带有红色 bg 颜色的 div mix-blend-mode: multiply。看起来颜色混合工作正常，但是有没有办法可以使白色文本不受影响并且像示例图像中那样不透明的纯白色？

我使用 的screen值mix-blend-mode来组合三个 div，红绿蓝各一个。我想我应该期望组合 div 的中心是白色的，但颜色似乎不对。我误解了它是如何工作的，还是我使用不正确？谢谢你。

请参阅此代码段：

我尝试添加 mix-blend-mode: 差异；到“跨越”，但它不起作用。

此解决方案有效：我将混合模式添加为“.caption span”到“.caption”。但我真正需要的是把 span 放在一个 div 中。

任何想法为什么？谢谢！

我正在尝试创建类似于这支笔上显示的双色调效果：https ://codepen.io/meowwwls/pen/zoRjdK

我的尝试在这里，并且完全按照我想要的方式工作，用于普通的 img 标签：https ://codepen.io/sunnywz/pen/zPyYYR

但是当我将相同的样式和伪元素应用于具有背景图像的 div 时，它会产生完全不同的效果，正如您在第二张图像中看到的那样。

我试图在带有背景混合模式的 div 上使用 $dark_blue 颜色，但这似乎根本不起作用。

如何在背景图像上达到相同的效果？

我想根据文本的背景反转文本颜色，如下图所示：。

所以我尝试了以下代码，但它没有工作：

我发现了一些关于background-image& 反转文本的结果，但我不知道如何使用 DIV 来做到这一点。

我有一个带有红色背景的父元素。我想要一个 h2 元素将一些单词与背景混合，换句话说，在 span 标签内，不。

我下面的示例不起作用。
如何让它发挥作用？

在 JSFiddle 上查看

我有一个使用两个图像的 html5 动画。第一个是一个女人的jpg。第二个是渐变 jpg，叠加在女人的上方，并在她身上进行动画处理。

我希望渐变图像的不透明度为 50%，并将 CSS mix-blend-mode 属性设置为“screen”。

它在A1 版（使用 Google Web Designer 创建）中运行良好。请参阅此处的A1 版本。

它不适用于B1 版（使用 Adob​​e Animate CC 创建）。渐变的不透明度为 50%，但没有“屏幕”混合模式，因为 Animate CC 的 gui 不支持“屏幕”混合模式。请参阅此处的B1 版本。

我希望版本 B1 看起来像版本 A1。我无法调整代码来实现这一点。有人有想法吗？

在此处下载 html 和图像文件：下载.