问题标签 [mix-blend-mode]

显然 mix-blend-mode 不适合使用transform: translate()and z-index。将这些中的任何一个应用于某些文本元素将立即取消混合混合模式的影响。

问题

1. 这是一个已知的限制吗？
2. 是否有基于 CSS 的解决方法？

我知道我可以使用 JavaScript 来模仿transform: translate()功能，但这并不理想。

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

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

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

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

提前致谢！

所以我使用混合混合模式：乘法；悬停时在我的图像上创建多层的效果。问题是图层超出了图像边界，如下图所示。我尝试将宽度和高度设置为 .imgcon 和 .imgcon > img（请参见下面的代码），并且该图层适合，但是当在不同的屏幕分辨率上查看时，它会弄乱响应式 Web 功能。所以我尝试将宽度和高度设置为 100% 以保持响应功能，但图层仍然超出图像边框。

这是我的代码：

我的页面有带有背景图像的部分和其他带有白色背景的部分。我的导航文本颜色是白色的。当导航在图像背景上时，可以看到它。当它在白色背景部分上方时，它会消失。

带有图像背景的部分的白色导航

我知道mix-blend-modeCSS 属性。我已经尝试了几乎所有可能的值（参见 CSS Tricks /almanac/properties/m/mix-blend-mode/，因为我显然不能发布两个以上的链接......）。仅在白色导航上产生良好的效果，但对白色上的图像产生不好的效果exclusion。difference

我想要的是导航始终保持白色，除非它位于白色背景上。

我想到了一种 JS 方法，当它检测到背景是白色时，将一个类绑定到导航。这是可能的，因为我所有的白色背景部分都有一个.light类。此解决方案工作正常，但它似乎有点重（资源要求高），因为每次在文档元素上检测到滚动事件时它都会运行：

我喜欢这个mix-blend-mode解决方案，因为它不需要太多资源，但它不适合我的使用，而且我认为它存在跨浏览器支持问题。我喜欢我的解决方案，因为它有效，但可能会减慢页面恕我直言。谁能提出一个更简单的解决方案或告诉我混合模式是否可以解决问题？

Codepen 与我的工作解决方案：http ://codepen.io/anon/pen/bwXVKm

我一直在尝试在包含 css 不透明度转换实例的页面上使用混合混合模式。似乎正在发生的是，包含混合混合模式的 div 在过渡期间显示为没有混合模式，或者更确切地说，在动画正在进行时。我只发现它是 Chrome 中的一个问题。

在我的示例中，当 div 正在转换混合模式时，可以在图像上正确显示，但不能在页面背景上显示。转换完成后，它会返回到应有的显示状态。换句话说，当动画正在进行时，混合的 div 在黑色背景上显示为纯黄色，但由于它被设置为变暗，它应该在黑色背景上不可见。动画完成后，它会按原样显示。它在图像上看起来很正常。

我试过这是 Firefox 和 Safari，似乎没有问题。

笔：http ://codepen.io/anon/pen/QGGVOX

编辑 - 我发现了另一个不涉及任何动画的实例。奇怪的是，当一个 div 的位置设置为固定而另一个是绝对时，会发生这种情况，请参见此处：http : //codepen.io/anon/pen/wooRME 如果 div .image 的位置更改为绝对，则混合-mode 显示正常。

我在 Google Chrome 中遇到了一个非常奇怪的错误！

如果我在 en 元素上使用 mix-blend-mode 属性，那么如果我应用 transform: translateZ(50px); 到它下面的元素，它不起作用！

请看这个：

该演示中的 2 张卡片具有完全相同的结构、样式和 js 功能，但后者无法正常工作，因为具有 mix-blend-property 的元素在它之前，尝试将其删除，它工作得很好！！

我怎么解决这个问题？！

我注意到，即使您使用相同的混合模式，使用时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，因为不透明度不能应用于同一个对象。

这看起来应该是可能的，但解决方案让我想了太久。您可以使用混合混合模式在通过可滚动 div 中的孔切割显示的背景中制作可点击的链接吗？我尝试了通常的技巧pointer-events:none，但这不起作用，因为“洞”不是真正透明的，也可能是因为背景实际上是两级。

到目前为止，这是我的代码：

如果滚动内容，您将看到背景内容进入查看 - 带有链接 - 但我无法弄清楚如何使链接可点击（如果可能的话）。

感谢您的任何建议。JS/Jquery 解决方案会很好，尽管直接 CSS 是首选。

我正在努力让mix-blend-mode背景幻灯片发生。我已经把它放在一起工作的 jsfiddle。

问题是，需要它看起来更像这样。

但我不想摆脱它的倾斜或从右侧滑入。我尝试使用与该示例相同的混合模式，但无论我做什么，它都不会保持悬停时的红色幻灯片颜色和红色下的白色文本。我只想使用伪元素并将 html 保持在最低限度。我认为使用伪元素可以做到这一点，但是混合模式不与我合作，也不知道如何让它看起来更像第二把小提琴。我的html如下：

CSS是：

仅当红色滑过该文本时，如何使背景文本以白色显示？我的mix-blend-mode代码一定是错误的，但看起来可以在这里做。

这是一个很难解决的问题，因为问题可能是复杂的 WordPress 页面上的任意数量的东西。

为我认为可能是问题的问题创建小提琴并没有复制问题。

目前，出现问题的页面的摘录就足够了，所以在考虑否决问题之前，请知道我打算在知道触发错误的根本原因后用小提琴更新问题. 提前感谢您允许为了更大的利益而稍微暂时地改变规则。

请注意，我将开始缓慢地削减元素，直到只剩下问题，或解决，或此处提供答案，以先到者为准。

临时问题

一般来说：mix-blend-mode 会影响 Mac 上 Chrome 中的父元素。它似乎会影响超出页面和/或固定的元素。可能与绝对定位的元素有某种关系。在这个阶段这一切听起来有点模糊，但我越来越接近找到答案，因此是一个更好的问题。

我将在 Google 的论坛上提交错误报告，但值得指出的是，这确实有一个 CSS 解决方法，所以这个问题仍然相关。大约 6 个月前，我设法在另一个网站上解决了这个问题。不幸的是，该网站不再存在，所以我无法找出我是如何修复它的。

例子

这是WordPress 管理栏受到影响的部分精简页面。当您将鼠标悬停在元素上时，黑色的管理栏会闪烁。

我通过提取 HTML 和 CSS 来制作该示例，然后删除元素直到问题停止发生，然后将我的删除倒回一个元素以使问题仍然存在。

额外的

更复杂的是，这个问题在一定程度上是间歇性的，带有一定程度的“观察者效应”。检查元素有时可以解决问题。

我很确定这是 Mac Chrome 特有的错误，尽管它在一年多的更新中仍未得到解决。它不会出现在 Firefox、Safari 或 Windows 版本的 Chrome 中。

再次感谢。我期待着——不仅要找到答案，还要改进问题。