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上它只显示纯色。如果我删除background-position-y，那么Safari将使用乘法混合模式正确显示它。

我注意到背景位置y在没有渐变叠加的情况下确实有效，而不是同时进行。

有没有人知道为什么这个位置会在safari上打破这个？

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; 
}

为什么background-position-y不适用于全屏幕背景+叠加的野生动物园？

1 个答案: