问题标签 [mix-blend-mode]

我需要用 css 提供这个图像。必须在图像上放置一个图层。我无法得到完全相同的外观。有针对这个的解决方法吗？它也可以是 SVG 过滤器。

预期结果：

我试过了，但我做不到。

我正在尝试使 HTML5 视频的纯色背景与页面背景融为一体。

我试过使用mix-blend-mode虽然视频保持不变。有没有办法通过 CSS 做到这一点？

这是jsfiddle（视频背景应该像容器一样是灰色的）。我尝试了两种方法（主容器上的混合模式和视频的单独特殊容器上的混合模式。

这是代码：

JS

Chrome 似乎在具有边界半径的元素中动画/过渡混合混合模式有一个奇怪的错误。混合模式在翻译时被删除。怎么修？

将鼠标悬停在 chrome 版本 76 中的黄色叠加层上。

如果您在mix-blend-mode属性之前使用动画效果，您将不会获得混合混合模式。

删除动画类或禁用动画后，mix-blend-mode将起作用。

问题是什么？我花了几个小时来解决这个简单的事情。请帮忙

mix blend 无论如何都应该生效

我正在使用 mix-blend-mode: 差异对 HTML 应用暗模式效果。一切都很好，除了图像，它们也受叠加层的影响。我尝试使用以下方法隔离元素：

或在容器内

我要原图。这是它的外观：

这是完整的 HTML

如果可能的话，隔离图像的工作片段会很棒。

我正在尝试创建一个动画，其中每个元素都会根据父 div 的背景更改其颜色。我正在使用pts.js制作动画。它在画布上绘制所有内容。

这是我的设置：fiddle。

添加mix-blend-mode: difference;到画布后，尽管画布 (#pt) 的背景设置为透明，但整个渐变背景都会消失。我希望动画线条像静态文本一样动态改变它们的颜色。我怎样才能实现它？纯CSS甚至可以吗？

我有一个容器，我想对其应用 mix-blend-mode: 差异以与其父容器和父容器的父容器混合（等等）。当我应用混合模式时，容器仅与其父容器混合。我怎样才能达到我之前描述的结果。

代码结构是这样的：

提前致谢。

我正在尝试为一个项目的网站使用混合模式，但我发现它们在我的手机浏览器（iphone 7 上的 chrome v 78.0.3904.84）与我笔记本电脑上的浏览器（chrome v 78.0.3904.97 上）看起来不同苹果电脑）。 在笔记本电脑上看起来像这样， 在手机上看起来像这样。 据我所知，两种浏览器都支持混合混合模式，所以我不确定有什么不同。正在混合的元素的代码是：

这是 svg 背景图像顶部的 div。不涉及转换。

有谁知道可能导致差异的原因或如何解决？

我一直在做一个网站，我决定给它添加一个暗模式功能，我使用了 darkmode.js 库来实现它，该库的工作原理是mix-blend-mode: difference. 但是，当我使用 IntersectionObserver 添加滚动动画并启用暗模式时，应该出现的 div 会变成白色，然后立即变成黑色。是的，它可能看起来很复杂，所以

这是我的代码

我正在使用mix-blend-mode属性处理敲除文本。当我打开控制台以使用开发人员工具测试响应性时，混合文本的上方和下方会出现和消失的小线条。在每次选择时，我在开发人员工具控制台的设备选择器上都会出现这个错误。这些是一些例子：

页面调整为 iPad Pro 大小

页面大小调整为 Pixel 2XL 大小

这是我用来创建此文本的代码：

我注意到当您在Codepen上运行代码时不会发生此错误，我无法弄清楚为什么会这样。但是，它可能发生在一个简单的静态 HTML 文件上。

我尝试使用will-change: opacitydescribe here和here，但我没有运气。

我的 chrome 版本是Version 78.0.3904.108。此错误仅发生在 Chrome 上。如果有人能就此提供建议，我将不胜感激。