通过将“透视图”应用于html元素,我的混合混合模式似乎被Firefox忽略.
html {
perspective: 800px; /* causing the issue */
}
div {
color: #fff;
background: linear-gradient(to bottom,#000,orange);
mix-blend-mode: screen;
}
这是什么问题？
我正在使用Firefox 40.
解决方法
通过简单地将混合模式添加到html元素,您可以实现预期的结果.
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,orange);
mix-blend-mode: screen;
}
<div>Some Text</div> <div>Some more Text</div>
我不完全确定是什么导致的问题,但透视和混合混合模式将创建一个新的堆叠上下文,这可能与…有关系…
