我正在尝试将mask CSS属性与@supports CSS规则一起使用，并作为旧版浏览器的后备选项，我希望背景图片以原始颜色呈现。
到目前为止，我一直在使用这种方法
background-color: pink;
background-image: url('../img/SVG/chevron-thin-right.svg');
@supports (-webkit-mask-image: url('../img/SVG/chevron-thin-right.svg')) and
( -webkit-mask- size:cover) {
-webkit-mask-image: url('../img/SVG/chevron-thin-right.svg');
-webkit-mask-size: cover;
}
问题在于，即使在受支持的浏览器中打开，mask属性也无法正确应用于背景图像。它不会呈现正确的粉红色，而是呈现紫色（似乎粉红色与原始图像颜色混合在一起）。
如果我从代码中删除了background-image: url('../img/SVG/chevron-thin-right.svg');部分，则会呈现所需的粉红色。
我需要更改哪些内容，以便在支持mask属性时正确显示所需的颜色，并在不支持原始背景图像的情况下显示原始背景图像？