CSS로 SVG 배경 이미지 채우기 색상을 변경하는 방법은 무엇입니까?

SVG 배경 이미지의 채우기 색상을 변경하는 방법

인라인인 경우 CSS는 SVG 채우기 색상을 쉽게 수정할 수 있습니다. 그러나 SVG를 배경 이미지로 사용할 때 채우기 속성을 변경하면 문제가 발생합니다.

CSS 마스크를 사용하여 이를 달성하는 방법은 다음과 같습니다.

.element {
    background-color: red;
    -webkit-mask-image: url(icon.svg);
    mask-image: url(icon.svg);
}

이렇게 하면 제공된 이미지를 기반으로 마스크가 생성됩니다. SVG 이미지를 지정된 요소에 적용합니다. 결과적으로 요소의 배경색은 SVG의 채우기 속성에 의해 영향을 받습니다.

자세한 내용은 통찰력 있는 기사를 참조하세요: https://codepen.io/noahblon/post/coloring-svgs-in-css- 배경 이미지

위 내용은 CSS로 SVG 배경 이미지 채우기 색상을 변경하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!