问题标签 [mix-blend-mode]

我正在尝试使用覆盖不同位置的相同形状（在我的情况下为 SVG）的效果，并且它的颜色应该是“颜色闪避”。形状以红色、绿色和蓝色的原色出现。在所有形状相遇的地方，颜色是白色，而在其他地方则出现组合。我在https://codepen.io/anon/pen/dgKQqz创建了一支笔来演示。简而言之，样式：

和形状：

这在 Firefox (62) 中可以正常工作，但在 Chrome (70) 中似乎没有发生混合。问题不在于 SVG，因为即使是div元素中的常规文本也会像描述的那样表现。

我做错了什么，可以实现它以便它在两个浏览器中都可以工作，还是这是一个 Chrome 错误？

我正在尝试为一个按钮设置动画，该按钮应该在底层有一个黑色圆圈，顶部有居中的白色文本。黑色圆圈应从全尺寸缩放到较小尺寸，而文本应使用混合混合模式，以便在部分文本仍在圆圈内时保持白色，当部分文本在圆圈外时保持黑色。

这是一个可视化所需效果的 GIF：http: //g.recordit.co/bg4Jf7ivZ3.gif

我尝试使用以下代码创建它：

我在@keyframes 中为边距设置动画的原因是因为使用变换会出于某种原因移除混合混合模式。似乎还需要一个.menu设置了背景颜色的包装器（在这种情况下），以便文本在圆圈外时改变颜色。

无论如何，这只适用于 Chrome。有没有其他方法可以在尽可能多的浏览器中工作？

有没有办法让文本在圆圈外改变它的颜色，而不必为包装设置背景颜色？我将按钮固定在页面上，如果有办法在它的容器上没有纯色背景颜色，以便它与页面背景中的任何内容混合，我会更喜欢。

据我了解，CSS 的mix-blend-mode行为方式应该与 Photoshop 的混合模式相同。但是，在下面的简单示例中，我得到了不同的结果，我不知道为什么。

例子

青色矩形 (#00ffff) 与红色矩形 (#ff0000) 重叠一半。青色矩形的混合模式设置为“变暗”。因为“变暗”为重叠像素选择每个通道（RGB）中最暗的，并且所有三个通道在两个矩形中的至少一个中都是 0，所以我希望重叠区域是黑色的。

Photoshop中的结果

（为清楚起见，勾勒出青色矩形）

• 青色矩形在黑色背景上不可见（预期）
• 重叠区域也是黑色的（预期）

网络上的结果（最新的 Chrome，70.0.3538.102）

• 青色矩形在黑色背景上可见（不是预期的）
• 重叠区域是暗的（#2d0c1b），但不是黑色（不是预期的）

现场示例：CodePen

那么......为什么结果不一样？我错过了什么？

我正在尝试将 Photoshop 模型移植到我的 Wordpress 主题中。 我希望投资组合图像在悬停时获得“混合混合模式：带有绿色的多层” 。

子 div“vert-center”中的 H3 文本受到混合混合模式的影响，我无法找到为此 div 禁用它的方法。

图片示例：1. 没有悬停 PS 模型 2. 悬停 PS 模型 3. 它现在在我的浏览器中的外观（圈出受影响的文本）。

这里提出了一个类似的问题，但是我无法用答案解决它。

我正在使用 Wordpress 并在我的主题中调整自定义 CSS 代码，因此可以使用的选项有限。

自定义 CSS

用于显示投资组合项目的 HTML

如果我可以用 CSS 解决这个问题，现在有人吗？

先感谢您！

我有一个文本和 svg 图像，我想用黑色制作文本，但 svg 图像上方的部分是白色的。所以图像将是一个蒙版。这是我的尝试

这就是我感兴趣的：

我有 2 个 div，每个 50% 的宽度。有一个巨大的标题 h1 应该有这两个 div 的颜色。我尝试过混合混合模式，但是当设置为差异时它会给我一些随机颜色。我的目标是反转颜色但保持 div 的颜色。这是一个 codepen 文件，我试图让它尽可能简单：https ://codepen.io/lukagurovic/pen/MLoZmj 在这个例子中，最终效果应该是这样的：

https://jsfiddle.net/1uubdtz6/

但我不确定为什么它不适用于这些颜色。此外，这些 div 是交互式的，因此颜色必须随着 div 在悬停时宽度的增加而动态变化，并且应该只有文本的笔触而没有任何填充

我正在寻找一种基于背景更改某个元素的背景颜色的方法。您可以在 CSS 中使用 mix-blend-mode 做什么，但我希望能够设置颜色。

最好我可以对 SVG 使用相同的技巧。

为了展示我在这里得到的是一个带有混合混合模式的 jsfiddle： https ://jsfiddle.net/5p69j4st/7/

所以我希望带有类块的固定元素在绿色时为白色。

我在这里有相当令人费解的事业。

我正在建造一个用作“手电筒/探照灯”的鼠标。如果发生悬停，所有文本（内联元素，按钮，你明白这一点）都会从通常的白色反转为黑色，正常的背景是黄色的氛围。

我目前有以下设置：

（代码笔）

这几乎产生了预期的结果，除了border-radius: 50%不能正确处理半好的堆叠 div。像素剧！图像澄清：

问题：如何在保留当前对文本的效果的同时，删除由相同大小的这两个元素堆叠创建的黑色边框？

我有一个绝对定位的 div，具有背景颜色渐变。我有这个文本，我想在向上滚动文本时将其更改为白色。

我目前正在使用“混合混合模式”属性来实现这一点，但我找不到任何可以将文本从黑色变为白色的设置。有没有人这样做过或者能想到一个我能做的把戏？

*编辑 1：更改了我的示例片段代码。背景渐变不仅仅是一个矩形 div。它有点倾斜，这就是让它如此困难的原因。所以文本在边界处变成了两种色调。

*为清楚起见，编辑 2：我希望文本在白色背景上时为黑色（#000 纯色），在渐变/图像上时为白色（#FFF 纯色）。我的内容是可滚动的文本，如代码示例中所示。

*编辑 3：iOS Safari 不兼容，除非您执行以下 hack。为每个文本元素添加零宽度空间&#8203 ;以使其工作。这可以通过我在 CSS 标记中添加的 CSS 属性轻松完成。

我已经尝试了很多不同的方法，但无法使 .pink 和 .green div 相互混合，但不能使父元素 .wrapper 的背景颜色混合。

或者，请参阅小提琴：https ://jsfiddle.net/grettynebraska/9dr6vspy/5/#&togetherjs=breFHFSfEd

我的目标只是让粉红色和绿色的 div 相互融合，并生活在黑色背景上，与它们不融合。

我尝试使用绝对位置，并将粉红色/绿色 div 和包装器彼此相邻，作为兄弟姐妹。但是，所有元素仍然混合在一起。