CSS를 사용하여 SVG 배경 이미지의 채우기 색상을 어떻게 변경할 수 있습니까?

SVG 배경 이미지의 채우기 색상 수정

CSS를 사용하여 SVG를 배경 이미지로 통합할 때 채우기 속성을 직접 수정할 수 있는 기능 CSS를 통한 것은 제한되어 있습니다. 이 시나리오에서 채우기 색상을 변경하기 위한 솔루션은 다음과 같습니다.

CSS 마스크

CSS 마스크를 사용하면 요소에 적용되는 마스크를 만들 수 있습니다. SVG에 이 기술을 사용하려면 다음 단계를 따르세요.

1. SVG를 "icon.svg"와 같은 별도의 파일에 배치하세요.
2. 표시할 요소에 마스크 속성을 사용하세요. SVG 배경을 다음에 적용하고 싶습니다:

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

SVG 모양을 사용하여 마스크를 생성하고 요소에 적용합니다. .icon 클래스를 사용하세요.

참고:

• 요소의 배경색은 SVG의 채우기 색상 역할을 합니다.
• 이 기술은 SVG를 마스크하고 전체 이미지에 영향을 미칩니다. SVG 내의 특정 모양을 선택적으로 수정하려면 CSS 선택기를 사용하여 대상을 지정할 수 있습니다.

자세한 정보:

CSS에서 SVG 색상을 지정하는 데 유용한 리소스 배경 이미지는 https://codepen.io/noahblon/post/coloring-svgs-in-css-Background-images

위 내용은 CSS를 사용하여 SVG 배경 이미지의 채우기 색상을 어떻게 변경할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!