当 html 有 "perspective" 时混合混合模式被破坏

Question

通过将 "perspective" 应用于 html 元素我的 mix-blend- mode 似乎被 Firefox 忽略了。

html {
    perspective: 800px; /* causing the issue */
}

div {
    color: #fff;    
    background: linear-gradient(to bottom, #000, orange);
    mix-blend-mode: screen;
}

这有什么问题？我正在使用 Firefox 40。

http://codepen.io/Type-Style/pen/oXJbRE

Answer 1

看来您只需向 html 元素添加 mix-blend-mode 即可达到预期效果。

Working Example

html {
  background-color: #111;
  background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/e/ed/W3C%C2%AE_Icon.svg/210px-W3C%C2%AE_Icon.svg.png);
  background-repeat: no-repeat;
  perspective: 800px;
  mix-blend-mode: screen; /*see change here*/
}
div {
  height: 100px;
  line-height: 100px;
  font-size: 40px;
  color: #fff;
  background: linear-gradient(to bottom, #000, orange);
  mix-blend-mode: screen;
}

<div>Some Text</div>
<div>Some more Text</div>

我不完全确定是什么导致了这个问题，但是透视和混合混合模式都会创建一个新的堆叠上下文，所以它可能与此有关...

Answer 2

尽管在为元素定义 perspective 属性时，获得透视图的是 CHILD 元素，不是元素本身，你仍然必须调用你的子元素，并分配你想要的CSS 透视属性，以便运行跨浏览器。以下代码在任何现有浏览器中 100% 有效；

html {
    background-color: #111;
    background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/e/ed/W3C%C2%AE_Icon.svg/210px-W3C%C2%AE_Icon.svg.png);
    background-repeat: no-repeat;  
} 

div {
    height: 100px; line-height: 100px;
    font-size: 40px;
    color: #fff;    
    background: linear-gradient(to bottom, #000, orange);
    mix-blend-mode: screen;
}

.background-image{
    perspective: 50px; // calling on child element and applying the perspective
}

发生了什么问题？

在 HTML 标签下定义 perspective 属性会导致跨浏览器兼容性问题，因为您可能有很多主 html 标签下的元素，浏览器可能无法区分应用它的方式和应用到哪个元素。的确，透视属性仅影响 3D 转换元素，但这并不能保证任何浏览器都能检测到并将其应用于指定为主背景的图像。希望对您有所帮助。

当 html 有 "perspective" 时混合混合模式被破坏

mix-blend-mode broken when html has "perspective"

css

css-transforms

blending