CSS 의사 요소의 콘텐츠로 SVG 이미지를 사용할 수 있나요?-CSS 튜토리얼-php.cn

CSS 의사 요소의 콘텐츠로 SVG 이미지를 사용할 수 있나요?

Barbara Streisand

풀어 주다： 2024-12-08 09:51:11

원래의

645명이 탐색했습니다.

Can I Use SVG Images as Content in CSS Pseudo-elements?

SVG를 의사 요소의 콘텐츠로 표시

CSS에서 ::before 및 ::after와 같은 의사 요소는 요소를 향상시킬 수 있습니다. 앞이나 뒤에 내용을 추가하여 모양을 만듭니다. 텍스트 콘텐츠가 일반적으로 사용되지만 SVG 이미지를 이러한 의사 요소 내의 콘텐츠로 표시할 수 있습니까?

이를 달성하려면 SVG 이미지의 URL을 의사 요소의 콘텐츠 값으로 지정하세요. 예를 들어:

#test::before {
  content: url(path/to/your.svg);
  width: 200px;
  height: 200px;
}

로그인 후 복사

또는 data:image/svg xml 구문을 사용하여 CSS 내에 SVG를 직접 삽입할 수 있습니다.

#test::before {
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='100' cy='50' r='40' stroke='black' stroke-width='2' fill='red'/%3E%3Cpolyline points='20,20 40,25 60,40 80,120 120,140 200,180'>

로그인 후 복사

이 기술을 사용하면 복잡한 SVG를 통합할 수 있습니다. CSS의 강력한 기능을 사용하여 웹페이지에 그래픽을 추가하세요.

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