当 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;
}

这有什么问题?我用的是firefox40 .

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

Answer 1

看起来只要在html元素中添加一个mix-blend-mode就可以达到预期的效果。

工作示例

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 标签下定义透视图属性会导致跨浏览器兼容性问题，因为您可能在主html标签下有许多元素，并且浏览器可能无法区分如何以及应用它的元素。的确，透视图属性只影响3D转换的元素，但这并不能保证任何浏览器都会检测到它并将其应用于指定为主背景的图像。