我有两个重叠的遮罩,使用混合模式“multiply”将被遮盖的部分混合。 在 Chrome 中应用了效果,但具有此属性的 div 存在奇怪的闪烁。 造成这种闪烁的原因是什么,如何解决? 我已经在 Firefox 上进行了测试,效果良好,但在 Chrome 上不行!
上面的图像是动画结束后左侧div开始持续闪烁。
<div class="bottom-banner wr-fl">
<div class="left-overlay overlay"></div>
<div class="right-overlay overlay"></div>
<div class="center heading">
{{entry.bottom_banner.banner_heading}}
</div>
</div>
.bottom-banner .left-overlay
{
mix-blend-mode:multiply;
background:rgba(0,54,108,0.7);
transform:skew(-25deg);
z-index:11;
left:-280px;
}
.bottom-banner .right-overlay
{
width:500px;
transform:skew(-25deg);
right:-600px;
animation:slideinbottom 2s ;
background:red;
mix-blend-mode:multiply;
}
backface-visibility: hidden;
的方式解决。 http://www.w3schools.com/cssref/css3_pr_backface-visibility.asp - Craig