Question

通过将＆＃34; perspective＆＃34; 应用于 html 元素，我的混合混合模式似乎被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元素来实现预期的结果。

<强> 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 元素获取透视图， NOT 元素本身，仍然必须调用您的子元素，并为其分配所需的 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 标记下定义透视属性会导致跨浏览器兼容性问题，因为您的主要{{1}下可能有许多元素}标签，浏览器可能无法区分应用它的方式和元素。透视属性确实只影响3D变换元素，但并不保证任何浏览器都会检测并将其应用于指定为主背景的图像。我希望它有所帮助。

混合混合模式在html具有＆＃34;透视＆＃34;

2 个答案: