Chrome / Safari最近是否改变了混合混合模式的处理方式

本文介绍了Chrome / Safari最近是否改变了混合混合模式的处理方式的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述 几个星期前，我做了一个网页，使用（当时）最新版本的Chrome（可能是v56或v57，但我不知道肯定），Safari和Firefox在开发期间（在OSX上）。

虽然最近的Chrome版本（v58）不再适用。 解决方案

我不确定到底发生了什么，但是我可以通过添加 background：white 添加到根元素，并将 mix-blend-mode 移动到body中的包装元素上。 b $ b

html {background：white;显示：flex;身高：100％;} body {margin：0;背景混合模式：光度; background-image：url（upload.wikimedia/wikipedia/commons/1/15/AreeiroMetroLx2.JPG）; background-color：＃006699; {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，坐在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。整体思维方式，坐在amet molestie mi egestas简历。在quis consequat ligula。 Pellentesque erat elit，ultricies et massa ut，cursus congue dolor。 < / div>

I made a webpage a couple of weeks ago, using the (then) recent version of Chrome (probably v56 or v57 but i dont know for sure), Safari and Firefox during development (on OSX). dirkluetter.de/projecttype/kamera

Firefox (v52 & v53) still displays the Page as intended.

While the most recent Chrome version (v58) does not anymore.

I used mix-blend-mode and background-blend-mode CSS properties which worked fine then - and still do on FF. Now Chrome / Safari seem to ignore the property, while Firefox still displays the page as intended. Did something change recently in the way Webkit browsers handle mix-blend-mode? i cant find any infos regarding a change on this ... there are several other questions regarding mix-blend-modes and chrome but the ones i checked where not related to mine.

解决方案

I'm not sure exactly what's going on, but I can get it to work in Chrome by adding background: white to the root element and moving the mix-blend-mode to a wrapper element inside of body.

html { background: white; display: flex; height: 100%; } body { margin: 0; background-blend-mode: luminosity; background-image: url(upload.wikimedia/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>