问题标签 [mix-blend-mode]

我正在使用mix-blend-modecss 生成的内容来创建倍增的背景效果。

当我将此生成的元素应用于外部包装器时，它具有预期的效果：

当我将它应用于内部包装时，它不会：

在这两种情况下，应用人造背景颜色的实际 css 是相同的：

但在第一个示例中，它实际上mix-blend-mode正确地应用了效果。在第二个示例中它没有（尽管检查员确认该mix-blend-mode属性存在并设置为multiply）。

混合混合模式规范是否有一些我不理解的细微差别？还是我在代码中遗漏了一些重要的东西？

我已经接近我想要实现的目标。我想仅在文本和图像重叠时应用混合模式。现在它正在做我想要的。但是，我希望图像保持没有效果，只是让文本和图像混合。`

目前我正在调用 mix-blend-mode:difference; 在grid2上

结果截图

感谢您的任何帮助

我正在尝试创建一个带有剔除文本的导航栏。我已经使用<div>带有<p>内部的 a 测试了这段代码，并让它正常工作。但是，当我尝试<nav>使用相同的技术设置元素的样式时，文本保持黑色而不是透明。

HTML：

CSS：

这是<nav>条形图和我的 test的图像<div>，<div>正常工作而<nav>条形图不工作：

我无法使用chrome 或 edge 等 webkit 浏览器在fill="#fff"白色背景上显示svg 图像。mix-blend-mode: difference

它在 Firefox 中运行良好。查看此小提琴以供参考：JSFiddle

CSS

HTML

我正在尝试在双色标题上实现黑白文本的这种效果，该标题始终为白色，另一侧为背景图像（不同颜色）。

这是用于此示例的 css，仅因为图像具有纯黑色背景而起作用：

如果背景图像没有纯黑色背景，这将不起作用：

在这种情况下，我得到了我应该得到的东西，但我想要的是在左边得到一个白色文本，在右边得到一个黑色文本，就像第一个例子一样。

我一直在尝试 css filter，mix-blend-modess，clip-paths，我看过这个https://aerolab.github.io/midnight.js/（它不适合我的情况）但我总是得到错误的结果。您是否知道一种制作黑色/白色文本的方法，该文本知道白色背景并将文本变为黑色以及任何不是纯白色背景的内容，将颜色切换为白色？

我希望我的解释很清楚，任何解决方案甚至线索都非常受欢迎，即使它需要 javascript。谢谢你！

这是带有示例的代码笔：https ://codepen.io/vlrprbttst/pen/jOPMzvd?editors=1100

非常感谢！

我正面临一个具有混合混合模式属性的元素的“闪烁问题” 。我正在使用 scss 和 gsap 开发 reactjs 项目。

这是结构的代码。

这是SCSS代码

这是闪烁问题的演示

闪烁问题的演示

我尝试了几个选项，有和没有图像、其他颜色和其他混合选项。似乎没有任何效果。

在此先感谢您的帮助。

祝你有美好的一天

编辑：我认为这是 Mac（Catalina）上 Firefox（74.0）中的某种错误。我已经在我的 Mac 和 Macbook 上对其进行了测试，它们的行为不正确，但它在我的 PC Firefox 上运行良好。

我目前正在开发一个在图像顶部使用叠加渐变的网站。问题是当我将它们用作可点击图像的悬停元素时。它们在 Chrome、Safari 和 Opera 中工作得非常好，但在 Firefox 中就坏了。我通过检查器推断出问题是 z-index 与悬停时的混合混合模式配对有问题。是否有解决方案或解决方法可以像在 Chrome 中一样在 Firefox 中工作？这是该站点的 URL： http: //c3.abettermancc.com/

这是受影响的“方块”之一的隔离代码：

这就是 Chrome 中的样子（正确）

这就是 Firefox 中的样子（不正确）

大家好，我尝试fixed-background根据其他 div 的背景更改带有类的 div 的背景和颜色。我遇到了mix-blend-modeCSS 属性，但它似乎不起作用。

到目前为止，我还不是 CSS 专家，有人可以帮我解决这个问题吗？如果我让它与 JS 函数一起工作，我不会不高兴。

我有一个使用嵌套的、绝对定位的 div 的设置，我需要mix-blend-mode将 div 的元素与 z-index 低于该 div 的所有元素混合。

问题是每个 div 必须有自己独立的 z-index（由于可访问性原因，不能更改）。

用一个例子更容易解释：

我需要内部的图像layer-3与layer-1. 如果您从layer-2小提琴中删除 z-index，您将看到混合工作正常；但是，如上所述，出于可访问性的原因，这不是一个选项。

我在这里做了一个jsfiddle：https ://jsfiddle.net/gabranches/v6cuL2o4/44/

有没有办法解决这个问题，或者这只是一个限制mix-blend-mode？

目前我正在为初学者艺术课开发一个在线教育工具。为了可视化颜色的混合，我创建了 3 个可拖动的圆圈 (RGB)，用于将光线与屏幕混合模式混合。

这行得通！但是现在我想用 3 原色 (RYB) 完成同样的事情，所以如果我将黄色拖到红色上，我会得到橙色，蓝色过红色会给我紫色等。我还没有找到适合这个的混合模式. 这可能吗？

JSFiddle：https ://jsfiddle.net/t0u2agc3/