为什么背景位置-y 不适用于全屏背景 + 叠加的 safari?

Question

<div class=" backgroundimage"> </div> 

.backgroundimage {
background: linear-gradient(rgba(191,0,0,1),rgba(191,0,0,1)),url(image) no-repeat center center;
background-position-y: 250px !important;
background-blend-mode: multiply;
}

这是我正在使用的代码。从一些研究中，我发现为了在图像上添加颜色叠加层，必须始终使用具有相同颜色的渐变。 这在具有多重混合模式的Firefox和Chrome上完美运行，但是在Safari上它只显示纯色。如果我删除背景位置-y，那么Safari将使用乘法混合模式正确显示它。

我确实注意到背景位置 y 在没有渐变叠加的情况下确实有效，只是不能同时使用两者。

有没有人知道为什么这个位置在野生动物园上打破了这一点？

Answer 1

您可以使用background-image并使用:before作为渐变

下面是一个示例：

<div class="backgroundimage"> </div> 

.CSS：

body , html{
height: 100%;
width: 100%;
}
.backgroundimage{
position: relative;
background: url('img') no-repeat center center; 
background-position-y: 250px !important;
background-blend-mode: multiply;
height: 100%;
width: 100%;
}
.backgroundimage:before {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: -moz-linear-gradient(rgba(191,0,0,1),rgba(191,0,0,1)); /* FF3.6-15 */
background: -webkit-linear-gradient(rgba(191,0,0,1),rgba(191,0,0,1));/* Chrome10-25,Safari5.1-6 */
background: linear-gradient(rgba(191,0,0,1),rgba(191,0,0,1)); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
opacity: .6; 
}