집 >웹 프론트엔드 >CSS 튜토리얼 >배경 이미지용 CSS 내에 인라인 SVG 정의를 어떻게 포함할 수 있습니까?

배경 이미지용 CSS 내에 인라인 SVG 정의를 어떻게 포함할 수 있습니까?

How Can I Embed Inline SVG Definitions Within CSS for Background Images?

CSS에 인라인 SVG 정의 삽입

CSS의 흥미로운 측면 중 하나는 스타일시트 내에 인라인 SVG 정의를 통합하는 기능입니다. 이 기술을 사용하면 개발자는 SVG 그래픽을 CSS 코드에 직접 삽입하여 배경 이미지나 기타 시각적 요소로 사용할 수 있습니다.

SVG를 사용하여 간단한 선형 그래디언트를 생성하려는 다음 예를 고려해 보세요.

.my-class {
  background-image: <svg>...< /svg>;
}

이 작업을 수행하려면 다음과 같이 '배경 이미지' 속성 내에서 SVG 그라데이션을 정의해야 합니다.

body {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10'>
    <linearGradient>

다음을 사용하여 'data:' URI 체계를 사용하면 SVG 정의를 CSS 파일에 삽입하여 배경 이미지로 렌더링할 수 있습니다. 결과는 'my-class' 선택기를 사용하여 모든 요소에 적용할 수 있는 동적 그라데이션 배경이 됩니다.

위 내용은 배경 이미지용 CSS 내에 인라인 SVG 정의를 어떻게 포함할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：