问题标签 [background-blend-mode]

我在摆弄mix-blend-mode财产。一切正常，直到我transform: perspective(100px)在页面上的任何位置添加类似或任何其他 3d 转换，然后它完全中断。应用了转换，但混合模式消失了。

我在 chrome 和 firefox 以及 linux 和 windows 上进行了测试，到处都是一样的，但是在另一台计算机上它工作得很好（我不记得它有什么版本的 chrome 并且正在运行 ubuntu）。

这是可以用 CSS 解决的问题，还是可能只是硬件/GPU 驱动程序问题？

我放入background-blend-mode标签是因为该mix-blend-mode标签还不存在，但是这个属性奇怪地工作得很好，并且没有被转换破坏。

这是我想要实现的代码笔：http: //codepen.io/vnenkpet/pen/avWvRg

闪电不应该让它的黑色背景闪烁，但应该与页面背景平滑融合。

编辑：

我刚刚发现它确实可以在 Firefox 中使用。因此，这是一个 chrome 错误吗？据我所知，3D 变换不应该破坏混合模式......

正在努力实现具有聚光灯的重复背景，并决定使用混合模式来实现这一目标。

但是，似乎混合模式不适用于 Chrome。

复制在这里：http: //jsfiddle.net/pptn4f5v/7/

这是 Chrome 的限制吗？这在 Firefox 中完美运行。

我正在尝试创建content淡入header元素的效果。

这是一个小提琴：http: //jsfiddle.net/jdesilvio/kthPT/105/

如果您查看结果并滚动，您可以看到我想要达到的效果。如果你仔细观察HTML，CSS你会发现应该有一个h4元素和一个border，但是由于它们被设置为color: gray;它们是不可见的。

我尝试过使用其他值mix-blend-mode以及 Noting 的各种配置background: linear-gradient(gray 100px, transparent);都有效。

我当前的实现显然会导致不必要的副作用，更不用说我永远不能gray用作颜色。我该如何解决这个问题？或者我运气不好，如果是这样，有没有其他方法可以达到这种效果？

我在这里的标题上成功地使用了背景混合模式：https ://yogrow.co/ecommerce-stack

但是我注意到背景混合模式不适用于 iPhone。我只是没有背景颜色。

这是我正在使用的 CSS

是使用媒体查询创建一组新的 css 规则的唯一/最佳选择，或者是否有另一种方法来进行后备，因此对于 iPhone Safari 等不显示颜色的设备，背景会变为红色。

因为我在背景顶部有白色文本，所以它目前在 iPhone safari 上看起来难以辨认。

谢谢

我有以下 CSS 代码：

渐变或 url 背景的位置可以改变。我认为这应该对混合顺序有任何影响。我的问题是如何应用这些模式来计算最终值？

浏览器是先应用blend-mode-1然后url('image-url')再linear-gradient(gradient)应用blend-mode-2first 的结果，url('image-url-2')还是反过来？

我使用正确数量的背景混合模式还是需要指定其中的 3 个？

在 Photoshop 中，如果您将具有白色背景的 JPG 图像导入到具有蓝色 的文档中background，您可以background通过将图像设置为“正片叠底”模式来使图像的白色消失。

我可以单独使用 CSS 做同样的事情吗？

我有一个带有背景图像、颜色和混合模式的标题：乘法。在滚动时，我垂直更改背景位置以创建视差效果。在 Firefox 中，它加载正常，但在滚动时，背景图像的位置错误。它应该从 50% 50% 开始，并且在向下滚动时 y 位置增加。但是在 Firefox 中，当我开始滚动时它会跳到 20% 左右（css 仍然应该显示 50+%），然后继续从那里移动。当我在检查器中弄乱背景位置并将其设置为 0% 时，它看起来像这样：

此外，如您所见， background-blend-mode:multiply 也停止在滚动上工作。为什么是这样？当您使用 jquery 更改背景位置时，Firefox 不喜欢它吗？

代码：

编辑：我在不使用背景混合模式的其他页面上具有相同的视差效果，并且在这些页面上，背景位置的行为应如此。Soo .. 我猜混合模式会导致背景定位错误？我很困惑。

是否可以将 css 混合模式应用于不同 div 中的元素？

例如，我在一个 div 中有一个大的背景英雄图像。在该图像上方（在不同的 div 中）我有一个蓝色的半透明框，其中包含文本。这个透明框是我想应用混合的，但它似乎不起作用，可能是因为它们不在同一个 div 中，就像示例https://css-tricks.com/basics-css-blend-模式/

我在 wordpress 中工作，因此重新构造 HTML 以便将图像和彩色框放在同一个 div 中会有点困难。

有人知道我可以用来实现这种方法的技巧吗？

提前致谢！

我注意到，即使您使用相同的混合模式，使用时mix-blend-mode的结果也不同于使用时的结果。background-blend-mode

例如，比较以下 2 个结果：

我在下面的设置和 JSFiddles 中复制了：

HTML

CSS

JSFiddle

使用混合混合模式：https ://jsfiddle.net/p8gkna87/

使用背景混合模式：https ://jsfiddle.net/p8gkna87/1/

一些背景资料

我目前正在复制一个使用柔光混合模式的 Photoshop 设计，同时也使用 51% 的不透明度。所以它不能使用background-blend-mode，因为不透明度不能应用于同一个对象。

我有一个 HTML 页面，我需要在其中渲染 3 个图像，一个在彼此之上。

使用以下 CSS

前两个图像使用 CSS 属性 background-blend-mode 混合在一起：乘法，在此之上，我将最后一张图像（透明图像）与透明背景（想象一张房间的照片，墙壁区域为透明的）。

结果正是我想要的，但是当我尝试放

使其响应；它完美无缺，但在 ios 上失去了透明度。我在 Chrome、Safari 和 Firefox (iOS) 上测试了这种行为。在 OSX、Android、Windows 上的 Chrome、Safari、Firefox 上完全没有问题。

有什么我想念的吗？谢谢你的时间。

编辑：

layer0-image 和 transparent-image 是相同的图像，layer0-image 没有透明度并与 layer1-image 相乘，然后在这个混合图像的顶部放置透明图像。

我试图用另一个改变透明图像，问题似乎是layer0-image和layer1-image之间的混合，但是由于layer0-image和transparent-image是相同的，一开始我以为有透明度问题。

透明度是存在的，但 div #preview 放置时的高度为 0px

显示没有混合。

编辑2：

我正在添加一个示例来显示和复制错误：https ://jsfiddle.net/dyqnghdo/3/