Chrome 中的混合模式问题

Posted 2023-03-06

【中文标题】Chrome 中的混合模式问题

【英文标题】：mix-blend-mode issues in Chrome

【发布时间】：2017-04-01 13:20:48

【问题描述】：

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

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

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

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

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

body 
background: #000;


.blend 
  height: 650px;
  width: 50%;
  background-color: yellow;
  mix-blend-mode: darken;
  position: absolute;
  opacity: 1;
  left: 0;
  top: 0px;
  z-index: 100;


img 
  position: relative;
  z-index: 0;

【问题讨论】：

我遇到了完全相同的问题，并且对此失去了理智。如果您在过去一个月中找到了任何解决方法，请发布！

【参考方案1】：

所以，我想我找到了问题所在。在动画期间，似乎身体不算作一个元素，因此使黄色显示为 1 不透明度。我用其他混合模式测试过，它总是显示为黄色。 （当设置为'差异时，预期结果将是白色而不是黄色）

那么解决方法？只需添加一个 100% 大小和黑色背景的 div！然后，黄色有一些东西可以融入并且没有出现。

这是在您的笔中工作的代码：

html - 添加了 bg div：

<div class="bg"></div>
<div class="blend"></div>
<img src="http://lorempixel.com/500/500/">

这是css：

.bg
  background: #000;
  position: absolute;
  width: 100%;
  height: 100%;
  margin: 0;

body 
  background: #000;
  width: 100%;
  height: 100%;
  margin: 0;

我还更改了主体以填充窗口，因此边距也不是黄色的。或者，可以根据主体功能调整混合 div 的大小。

标记@chrscblls，因为他们想知道你是否发现了什么。

---

编辑：

对于其他 codepen，问题并不相同。他们试图在灰色背景上使图像和黄色矩形变暗。

如果他们不希望黄色显示在他们的灰色背景上，解决方案就是将图像放在 div 中并使用 ::after 混合颜色。或者甚至只是创建一个空 div，将图像作为背景并使用 ::after。

这个：

<div/>

与：

body 
  background: #333;


div
  position:fixed;
  width: 500px;
  height: 500px;
  top:50px;
  left: 50px;
  mix-blend-mode: darken;
  background-image: url("http://lorempixel.com/500/500/");

div::after 
  content: "";
  height: 100%;
  width: 100%;
  background-color: yellow;
  mix-blend-mode: darken;
  position:absolute;
  opacity: 1;
  left: 0;
  top: 0;

或者这个：

<div><img src="http://lorempixel.com/500/500/"></div>

在 div css 中没有“背景图像”。