5

几周前，我在开发过程中（在 OSX 上）使用（当时）最新版本的 Chrome（可能是 v56 或 v57，但我不确定）、Safari 和 Firefox 制作了一个网页。 http://dirkluetter.de/projecttype/camera

Firefox（v52 和 v53）仍按预期显示页面。 火狐浏览器 v52 截图

虽然最新的 Chrome 版本 (v58) 不再存在。 屏幕截图 Chrome v58

我使用了 mix-blend-mode 和 background-blend-mode CSS 属性，它们当时工作得很好——而且在 FF 上仍然有效。现在 Chrome / Safari 似乎忽略了该属性，而 Firefox 仍然按预期显示页面。Webkit 浏览器处理混合混合模式的方式最近发生了变化吗？我找不到有关此更改的任何信息...关于混合混合模式和铬还有其他几个问题，但我检查的问题与我的无关。

4

1 回答 1

5

我不确定到底发生了什么，但我可以通过添加background: white到根元素并将其移动mix-blend-mode到正文内的包装器元素来使其在 Chrome 中工作。

html {
  background: white;
  display: flex;
  height: 100%;
}

body {
  margin: 0;
  background-blend-mode: luminosity;
  background-image: url(https://upload.wikimedia.org/wikipedia/commons/1/15/AreeiroMetroLx2.JPG);
  background-color: #006699;
  background-size: cover;
}

div {
  mix-blend-mode: multiply;
}

p {
  color: magenta;
}
<div>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sollicitudin felis ultrices lacus venenatis, in porta dui sagittis. Aliquam maximus massa diam, ut elementum sem efficitur mollis. Proin mattis magna ante, sit amet semper nulla semper at. Vivamus hendrerit tortor nec lacus venenatis, vitae molestie odio consectetur. Vivamus fermentum id ligula et scelerisque. Etiam eu metus nec lacus aliquet convallis at sed mi. Integer euismod lorem risus, sit amet molestie mi egestas vitae. In quis consequat ligula. Pellentesque erat elit, ultricies et massa ut, cursus congue dolor. Suspendisse risus est, aliquet nec justo a, bibendum convallis justo.
</div>

于 2017-04-19T20:17:59.573 回答