Я пытаюсь использовать свойство 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 и отображается исходное фоновое изображение, если оно не поддерживается?