问题标签 [background-blend-mode]

我正在尝试以与 Photoshop 文件中相同的方式处理图像 - 将图像去饱和为灰度，然后使用多重混合模式应用颜色叠加。为此，我正在设计一个 CSS 背景图像...

这样做的问题是灰度滤镜最终会使混合模式下的红色去饱和。换句话说，乘法首先发生，然后是灰度。如何切换它以便首先应用灰度，然后再应用混合模式？

我为代码创建了一个小提琴（http://jsfiddle.net/g54LcoL1/1/）和一个屏幕截图（在 Photoshop 中制作），我希望小提琴结果看起来像。最底部的图像div.grayscale.multiply应该是红色的。

currently I am not able to blend a PNG Image with a CSS-rendered Gradient. The Code looks like this:

The Blend Mode is not applied when using a Gradient (and the most recent Chrome Canary Build which does support the background-blend-mode). It is however applied when using a plain Color as background, such as rgb(38, 38, 219) url(img/water.png)

Is this a limitation of the CSS Background-Blend-Mode Specification or am I doing something wrong?

All I want to do is to overlay a PNG over a Gradient, creating an effect that I can't achieve by e.g. having the PNG have lesser opacity or colorizing the PNG to begin with.

让我们假设我有一个渐变应用作为背景属性的div。我现在想要覆盖黑色 PNG（尺寸较小）并将 PNG 设置为具有覆盖的背景混合模式。不幸的是，我不知道如何实现这一目标。

我知道当我使用 PNG 图像将渐变渲染到 Div 的 CSS 中时，我可以有一个工作的背景混合模式，例如：

然而，这会导致渐变与实际的 PNG 一样小，这不是预期的效果，如下所示：

我想要实现的是纯 CSS（如果可能的话）：

这里有一个 Codepen 来说明我正在尝试做的事情：http ://codepen.io/anon/pen/zxOXGP 注意黑色图标。我想覆盖这个。

我有两个 div，一个是全屏背景图像，另一个是带有标记的栏。

我正在尝试使home.bar课程具有混合效果，screen并且我正在尝试这样做

但是我无法获得预期的效果。如何让 .home-bar 在 .home 顶部进行筛选？

我正在使用引导程序中的轮播组件，并且还想使用 CSS 混合模式background-blend-mode: multiply;作为标题。

不幸的是，混合模式不起作用。

代码如下：

CSS如下：

这是错误的方式吗？

我试图在鼠标悬停时实现单色彩色图像，其中图像的颜色转换为灰度，然后灰色阴影替换为我正在混合的颜色阴影。

它可能看起来像这样

要在 Photoshop 中模拟这一点，您可以对图像进行灰度化，在顶部添加所需的颜色层并将其与屏幕模式混合。

据我了解，如果您将 css 滤镜和背景混合模式结合使用，css 具有这种潜力，但如果您使用滤镜，结果将始终是灰度。

所以我问是否有任何其他方法来获得这种混合，或者在没有css过滤器之前对图像进行灰度化

我在使用 CSS background-blend-mode 时遇到了一个令人沮丧的问题，它在任何地方都能优雅地降级；具体来说，iOS 上的 Safari 和 Chrome 似乎逃避了我测试它们以获得支持的努力。

在撰写本文时，除 IE 之外的大多数浏览器的最新版本都支持背景混合模式（至少以基本形式）（请参阅：http ://caniuse.com/#feat=css-backgroundblendmode ）。我正在使用它将纯色背景颜色与灰度纹理混合，如下所示：

背景混合模式旨在降级，以便如果浏览器不支持它，该浏览器只会看到正常的背景图像。但是，我想专门针对那些不支持的浏览器，以便它们只能看到纯色，如下所示：

CSS Tricks和其他人建议使用基于 JavaScript 的测试来支持此属性，我正在使用它：

这适用于目标 IE，它获得了正确的 .no-background-blend-mode 类。桌面上的 Chrome、Firefox 和 Safari 都支持混合模式。

这就是问题所在：我正在查看 iOS 8.3 上的 Safari 和 Chrome，它们都通过了测试（typeof supportsBackgroundBlendMode返回“正常”）但未能实现混合模式。（它们都单独显示灰度背景图像，而不是混合）。

任何人都可以帮助我了解这里发生了什么，和/或帮助我找到一种方法来测试和定位这些浏览器的这个功能，这实际上有效吗？谢谢！

更新：仍然没有找到解决这个问题的好方法，这个问题一直存在到 iOS 8.4.1 中（截至本次编辑的最新版本）。

如何在元素上设置混合混合模式，但不是子元素？将孩子设置为默认值normal似乎不起作用：

http://jsfiddle.net/uoq916Ln/1/

使用 CSS，我正在尝试将背景图像与颜色混合。该图像是带有半透明部分的PNG。我怎样才能将混合模式仅应用于实际可见的部分，所以如果 PNG 有一个洞，那么可以看到后面的元素在那里畅通无阻？

像这样的代码：

导致不透明的颜色与顶部的图像混合。图像的完全半透明像素包含背景颜色，而不是在结果上是半透明的。

有人知道如何解决这个问题吗？提前致谢 ：）

我正在用 CSS 和 html 构建一个 ven 图。在 Firefox 中，由于某种原因，混合模式显示为全黑？

出于某种原因，这在 FireFox 中显示为 2 个黑色圆圈？