问题标签 [background-blend-mode]

我很好奇为什么这在 MS Edge / IE 浏览器中不起作用。那里没有混合模式属性吗？我无法挖掘任何关于它的信息。

我已经让混合模式在背景图像上工作，但是我想要一个更透明的图像。有没有办法（除了减轻 BG 图像本身会导致不同的“混合”）使图像不透明？

我在这里添加了代码。

我正在寻找一种方法来改变background-color-blend-mode像 Photoshop 这样的不透明度。我的目标是为混合模式的不透明度设置动画以使其消失。有任何想法吗 ？

我的 CSS 没有在 Microsoft Edge 和 IE11 中显示背景图像。它似乎与那些浏览器中的线性渐变有关。显示背景颜色，但不显示 Edge 和 IE11 中的图像。有什么建议么？

https://jsfiddle.net/t6j11zm4/

下面是一个针对指定“背景”元素的 CSS 混合模式示例：

这是一个混合模式不应用于的示例body：

是什么赋予了？计算 CSS 混合模式时是否body不考虑元素？这适用于所有浏览器吗？我是谁，我为什么在这里？body当尝试在with上实现动态（通过滚动）混合时，这是一个问题background-attachment: fixed。

更新：这似乎只适用于 Chrome；Firefox/Safari 的行为符合预期 - Chrome 怎么了？

我们运行网站 www.desirio.com，它在身体上使用背景图像

在 Chrome 中，当您将鼠标悬停在元素上时，您会看到奇怪的白线随机闪烁“某处”。当您删除 bg-blend-mode 时（如果您使用调试器尝试它，请注意将其删除两次，因为它在 CSS 规则中两次出现在主体上），闪烁消失了。

它看起来像这样：

我们在 OSX 上运行 Chrome 62，但也看到它在其他版本上发生。

看到这个JSFiddle

请注意，当您将鼠标悬停在图像上时，它会正确地将红色色调应用于地精。但是，我只希望红色应用于地精，而不是他周围的透明像素。有没有办法用 CSS 做到这一点？

这是一个密切相关的stackoverflow 帖子。我无法使用此解决方案，因为此解决方案中使用的图像非常基本，并且只有一种颜色。-webkit-mask-box-image 不适用于更复杂的示例。

编辑：这是我希望它看起来像的图片： https ://imgur.com/a/j3xt86B

我想为我的图像添加一个带有颜色的图层并设置混合模式，例如乘以所有图像宽度的 50%。像那样：

我知道如何通过如何创建 50% 的图像宽度来创建完整图像？

这是完整图像的示例

我想知道是否有可能在背景混合模式下旋转图像。我想旋转我的第二张图片：GLRlogo_RGB.png。我已经尝试过它来转换、翻译，但它似乎并没有那样工作。任何人都可以帮我解决问题吗？谢谢！

这是我的代码

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

预期结果：

我试过了，但我做不到。