问题标签 [background-blend-mode]

大多数混合模式在 chrome mobile 中不起作用 - 我已经能够让“屏幕”和“叠加”工作，但不是像乘法、变暗、排除等那样。有谁知道这是否与s9的gpu架构在这里不兼容？

代码笔

这是一个带有屏幕截图的简单示例：

在 chrome 桌面上，我看到一个漂亮的金属色球：

在 chrome android 中，我看到失败：

很想知道这是否是一个已知问题，或者是否有任何解决方法。请注意，我在纯 chrome 环境中，所以我目前不太关心其他浏览器。

更新 1

看来这可能是三星 s9 的问题，因为自 2019 年 4 月以来，其他人在 s9s 上偶尔看到此问题。我只在我的个人 s9 上进行了测试。请求站点的桌面版本可以解决问题，但这对最终用户没有帮助。CSS 背景混合模式不适用于三星 S9

更新 2

删除 meta name=viewport 标记可以解决问题，并且一切正常。这显然不是一个可行的解决方法，所以我希望 chrome 开发人员能看到这一点。将发布一个错误。

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

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

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

这是代码：

JS

我曾经background-blend-mode: lighten;基本上减轻了黑色背景图像的强度（refath.github.io/Survey）。虽然它在桌面上完美运行，但我在手机上检查了该网站，由于某种原因，黑色背景简单地覆盖了background-blend-mode，如果这有意义的话。我什至尝试使用!important覆盖任何可能干扰设计的库，但无济于事。以下是相关代码：

CSS：

在桌面（Chrome）上：

在 iPhone X (Chrome) 上：

任何帮助将不胜感激。谢谢。

我正在开发一种产品。我做了一道闪电。这个动画在 chrome 上效果很好。但是 Safari 上没有动画。这个问题是由背景混合模式还是其他原因引起的？

代码：

我正在寻找一种降低背景混合模式不透明度的方法。我的代码中的不透明度会影响颜色和图像。我希望它只影响混合模式。我想达到这样的效果

我想将这些 CSS 规则翻译成 Imagemagick 的convert命令：

有什么建议么？

JSFiddle 在这里使用我自己的示例图像：https ://jsfiddle.net/1b4wek70/

请注意，图像和蒙版都是相同的来源，但这不应该是问题。我也-webkit-mask-image用于 Chrome，因为它仍然需要添加前缀，因此请确保在适当的浏览器上查看它。

如何仅将父元素和子元素的两个背景与css混合：

这不起作用...

我想将 bg -> img2 与 bg -> img1 混合

使用 css background-blend-mode 我正在尝试设置一个蒙版，其中第一个背景图像白色部分在最后一个上应用黑色蒙版。

这是一个代码示例，显示了我卡在哪里：https ://codepen.io/BackNight/pen/YzQgyjo

我只能用“差异”模式获得橙色，我只需要它是黑色的：

给你一个我想要的最终结果的例子：

我有.card一个background-blend-mode: multiply适用于它的课程。它在桌面上的任何地方都可以正常工作，但在 iOS（Firefox、Safari）上它只能在某些元素上工作。

在这个通过 jQuery 加载到主页面的页面上（页面上的所有内容都是这样加载的），只有最后两个 div 正确应用了这个效果。第一个不会融合。

此外，这两个 div 是整个网站中唯一正确应用混合的。

我该怎么做才能让背景混合无处不在？

将图像与颜色混合的标准方法是使用以下 CSS：

我想在不使用 CSS 指定照片的情况下执行此操作，因为 IMG 已经由 Wordpress 主题的 PHP 生成，我不想搞砸。

有没有一种方法可以将混合模式应用于 IMG，以便它与其父 DIV（或层次结构更高的任何元素）混合？这样我就可以使用 CSS 将混合模式应用于 IMG 并将背景颜色应用于其父 DIV。（我似乎无法将背景颜色直接应用于 IMG）。

谢谢！我希望这是有道理的。