"Property is nonstandard. Avoid using it." 用于“-webkit-mask-image”和“-webkit-mask-size”。我应该用什么代替？

Question

当我使用“-webkit-mask-image”和“-webkit-mask-size”时，VsCode 说“属性是非标准的。避免使用它。”。我不知道我应该用什么来代替。我的代码如下：

a.effect-shine:hover {
    -webkit-mask-image: linear-gradient(-75deg, rgba(0, 0, 0, .7) 30%, #000 50%, rgba(0, 0, 0, .7) 70%);
    -webkit-mask-size: 200%;
    animation: shine 1s infinite;
}

@keyframes shine {
    from {
        -webkit-mask-position: 150%;
    }

    to {
        -webkit-mask-position: -50%;
    }
}

Answer 1

尝试将其从 -webkit-mask-image / -webkit-mask-size 更改为仅 mask-image 和 mask-size，看看是否能解决您的问题。

a.effect-shine:hover {
    mask-image: linear-gradient(-75deg, rgba(0, 0, 0, .7) 30%, #000 50%, rgba(0, 0, 0, .7) 70%);
    mask-size: 200%;
    animation: shine 1s infinite;
}

您也可以只添加和定义属性 mask-image 和 mask-size，如下所示：

a.effect-shine:hover {
    -webkit-mask-image: linear-gradient(-75deg, rgba(0, 0, 0, .7) 30%, #000 50%, rgba(0, 0, 0, .7) 70%);
    mask-image: linear-gradient(-75deg, rgba(0, 0, 0, .7) 30%, #000 50%, rgba(0, 0, 0, .7) 70%);
    -webkit-mask-size: 200%;
    mask-size: 200%;
    animation: shine 1s infinite;
}

但这仍然会给您一个 'Property is non standard. Avoid using it' 错误，但会删除红色标记。我建议在回答中使用第一段代码，因为这些属性 'mask-image' 和 'mask-size' 也是 Safari、Opera、Chrome、Edge 和 Firefox 等浏览器的标准。

Answer 2

尝试使用这个“-webkit-mask:”而不是使用完整的术语。它显示为一个问题，但最终我的图像可以完美发光。

.ha {
    position: fixed;
    transform-origin: 50% 0;
    z-index: -1;
    display: inline-block;
    width: 100%;
    height: 750px;
    padding: 0;
    background-image: url(../assets/img/sprite-home-single.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center top;
    -webkit-mask: linear-gradient(60deg, #000 30%, #0005, #000 70%) right/300%
        100%;
    background-repeat: no-repeat;
    animation: shimmer 2.5s infinite;
    color: gold;
}

"Property is nonstandard. Avoid using it." 用于“-webkit-mask-image”和“-webkit-mask-size”。我应该用什么代替？

"Property is nonstandard. Avoid using it." for '-webkit-mask-image' & '-webkit-mask-size'. What should I use instead?

html

css

frontend

web-deployment