>웹 프론트엔드 >CSS 튜토리얼 >CSS로 SVG 배경 이미지의 스타일을 지정할 수 있나요?

CSS로 SVG 배경 이미지의 스타일을 지정할 수 있나요?

Mary-Kate Olsen
Mary-Kate Olsen원래의
2024-11-06 18:48:02731검색

Can You Style SVG Background Images with CSS?

CSS를 통해 SVG 배경 이미지 스타일 지정

SVG가 설정된 것과 동일한 CSS 파일을 사용하여 배경 이미지로 사용할 때 SVG 스타일을 지정할 수 있습니까?

SVG 이미지를 개별적으로 또는 스프라이트로 성공적으로 배치하고 크기를 조정하고 클리핑할 수 있지만 배경 이미지로 할당하는 동일한 CSS 파일 내에서 SVG에 스타일을 지정하는 것은 불가능합니다.

상위 요소의 클래스에 따라 모양의 색상을 변경하는 것을 목표로 하는 다음 의사 CSS 코드를 고려해보세요.

element1 {
    background-image(icon.svg);
}

element1.black .svg-pathclass {
    fill: #000000;
}

element1.white .svg-pathclass {
    fill: #ffffff;
}

SVG에 "svg-pathclass" 경로가 포함되어 있다고 가정하는 이 접근 방식은 다음과 같습니다. " 클래스는 실행 불가능합니다.

이유는 SVG와 CSS의 특성에 있습니다. SVG는 데이터 URI로 준비하거나 외부에서 참조할 수 있는 독립형 문서입니다. 다른 파일의 배경 이미지로 사용되면 CSS로 수정할 수 없는 불변 이미지가 됩니다.

위 내용은 CSS로 SVG 배경 이미지의 스타일을 지정할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.