混合模式在 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

- Type-Style

Answer 1

似乎你可以通过在HTML元素中添加混合模式(mix-blend-mode)来实现预期的结果。

工作示例：http://jsfiddle.net/2bmgs5nc/1/

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>

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

- apaul

---

堆叠上下文可能是一个问题。我使用不透明度：0.99来翻转透视，得到了相同的结果。 - Type-Style

Answer 2

尽管在定义元素的perspective属性时，是其子元素获得透视视角，而不是元素本身，你仍然需要调用子元素，并将所需的CSS透视属性分配给它，以使其在跨浏览器下运行。以下代码在任何现有浏览器中均可正常工作；

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标签下可能有许多元素，并且浏览器可能无法区分如何以及应该应用到哪个元素上。虽然视角（perspective）属性只影响3D变换的元素，但并不保证任何浏览器都能检测并将其应用于指定为主背景的图像。 希望这有所帮助。

- Pouya Ataei