0
我正在修改混合混合模式属性以将滤色器应用到图像上,但它看起来像混合混合模式乘法以不同方式工作Chrome和FF。混合混合模式乘法在FF和Chrome中的工作方式不同
.filter {
position: relative;
}
.filter::before,
.filter::after {
position: absolute;
content: '';
height: 100%;
width: 100%;
top: 0;
left: 0;
display: block;
z-index: 1;
}
.filter--rise {
-webkit-filter: brightness(1.2) contrast(0.9) saturate(90%);
filter: brightness(1.2) contrast(0.9) saturate(90%);
}
.filter--rise::before {
background: -webkit-radial-gradient(circle, rgba(236, 205, 169, 0.2) 55%, #321E07 100%);
background: radial-gradient(circle, rgba(236, 205, 169, 0.2) 55%, #321E07 100%);
mix-blend-mode: multiply;
opacity: 0.8;
}
.filter--rise::after {
background: -webkit-radial-gradient(circle, rgba(246, 189, 57, 0.6), transparent 100%);
background: radial-gradient(circle, rgba(246, 189, 57, 0.6), transparent 100%);
mix-blend-mode: overlay;
opacity: 0.6;
}
<figure class="filter filter--rise">
<img src="http://i.imgur.com/KQ0U5BL.jpg" alt="">
<figcaption>Rise</figcaption>
</figure>
这是结果(左边是铬,右边是FF - 预期结果是FF)。
http://i.imgur.com/ySPTbFN.png
能向我解释人为什么会这样? (为什么只有这种模式,因为其他模式,如硬灯,覆盖等工作相同)
我在右侧看到Firefox和Chrome的结果。你使用的是什么版本的Chrome?请记住'mix-blend-mode'是规范的一部分,只有候选推荐状态。它在[从v41开始的Chrome]中默认启用(https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode#Browser_compatibility)。 – szupie
我有两个最新版本(Chrome 46和FF 42) – shelune