CSS 배경 이미지에서 svg 사용 소개(예제 포함)

이 글은 CSS 배경 이미지에서 svg를 사용하는 방법을 소개합니다(예제 포함). 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

CSS 배경 이미지에서 SVG를 사용하면 이미지 크기, 이미지 위치 등 CSS 배경 속성의 다양한 기능을 사용할 수 있습니다. 장치의 크기에 따라 이미지의 크기를 제어하는 ​​것이 매우 쉽습니다. 또 다른 장점은 HTML에 SVG 이미지를 삽입할 필요가 없으므로 HTML을 깔끔하게 유지할 수 있다는 것입니다.

CSS 배경 이미지에서 SVG를 사용하면 많은 장점이 있으며 성능 향상에 매우 도움이 됩니다. 그렇다면 CSS 배경 이미지에서 SVG를 사용할 때 색상을 변경할 수 있는 방법이 있나요? 계속 읽어보세요.

CSS 마스크

CSS에서 마스크를 사용하여 배경색을 변경하세요. 이 방법은 간단하고 실용적입니다. 중요한 것은 이제 브라우저가 이 기능을 더 잘 지원한다는 것입니다. 마스크 속성을 사용하면 요소의 윤곽선을 기반으로 마스크를 만들 수 있습니다. 마스크를 사용하면 지정된 이미지 콘텐츠의 영역만 표시할 수 있고 이미지 영역 외부 영역은 숨겨집니다. 사용 방법은 다음과 같습니다.

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

mask에는 마스크 위치, 마스크 반복 및 마스크 크기와 같은 많은 속성이 있으며 CSS의 배경 이미지에 해당하는 속성과 유사하며 배경처럼 사용할 수도 있습니다. 축약된 구문을 사용하려면:

.icon {
background-color: red;
-webkit-mask: url(icon.svg) no-repeat 50% 50%;
mask: url(icon.svg) no-repeat 50% 50%;
}

마스크에 대한 브라우저 지원도 점점 더 좋아지고 있습니다. 다음 주소를 통해 다양한 브라우저의 지원 여부를 확인하실 수 있습니다:

https://caniuse.com/#search=mask-image

또한 CSS 수정에 국한되지 않는다면 직접 수정도 가능합니다. svg 소스 파일

svg 이미지를 편집기로 드래그하여 svg 소스 코드를 확인하세요

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" " 
<svg t="1540202401705" class="icon"  viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10044" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200">
<defs>
<style type="text/css">
</style>
</defs>
<path d="M279.374 707.763C95.265 506.544 42.467 264.487 159.2 156.707c25.227-23.275 56.897-38.54 93.597-45.297 2.592-1.037 5.277-1.942 8.07-2.655 0.198-0.045 1.495-0.365 1.68-0.408 59.18-13.637 130.407 48.272 165.687 144.012 23.017 62.442 24.332 123.377 3.53 163.005-11.057 21.047-27.832 34.98-48.965 40.377-0.02 0.003-2.212 1.172-2.77 2.32-0.783 1.592-0.962 6.665 2.945 15.852 19.252 27.482 40.742 54.21 63.895 79.52 25.195 27.52 52.245 53.215 80.43 76.365 0.31 0.215 0.61 0.415 0.905 0.605 4.695 3.365 7.18 2.79 8.37 2.515 4.165-0.96 8.635-4.73 11.22-7.415 9.725-22.71 30.73-38.74 59.715-45.42 38.985-8.985 89.81-0.715 139.445 22.675 91.08 42.95 141.545 117.275 125.25 175.335-1.455 5.185-1.59 5.735-3.045 10.795-12.07 32.925-28.38 62.875-52.92 85.53-22.97 21.21-51.175 35.765-83.845 43.29l0.01 0C603.518 947.402 421.466 863.038 279.374 707.763zM593.493 646.688c-0.81 2.37-1.985 4.605-3.45 6.62-1.695 2.335-17.295 22.88-42.175 28.61-15.69 3.62-31.43 0.69-45.74-8.44-1.533-0.8-3-1.76-4.372-2.875-30.892-25.18-60.482-53.175-87.98-83.22-25.205-27.545-48.562-56.715-69.445-86.67-0.858-1.237-1.603-2.547-2.223-3.902-10.597-23.097-11.705-43.572-3.283-60.812 11.04-22.607 33.825-28.61 35.955-29.1 2.455-0.63 9.96-2.538 16.465-14.92 13.862-26.42 11.43-74.4-6.2-122.215-26.652-72.335-78.575-119.007-107.682-112.3-1.145 0.31-2.235 0.76-3.292 1.245-1.905 0.835-3.908 1.427-5.962 1.795-28.062 4.72-52.137 15.965-70.785 33.152-92.912 85.777-36.505 305.654 123.165 480.141 128.205 140.11 294.584 220.249 404.619 194.895 24.03-5.535 44.56-16.025 61.01-31.225 18.15-16.77 32.815-41.595 40.6-66.98 0.66-2.145 1.52-4.81 2.645-9 7.385-27.38-31.775-81.15-99.855-113.23-39.045-18.405-78.925-25.57-106.715-19.17C609.268 631.288 597.133 636.113 593.493 646.688zM653.488 446.834c-14.005 0.62-25.87-10.2-26.49-24.205-0.46-10.005-4.775-19.232-12.165-25.96-7.385-6.755-16.96-10.222-26.96-9.772-13.995 0.645-25.865-10.195-26.495-24.2-0.64-14.005 10.175-25.857 24.195-26.505 23.545-1.075 46.09 7.105 63.49 22.987 17.395 15.902 27.565 37.622 28.63 61.155 0.56 12.43-7.91 23.19-19.62 25.885C656.598 446.559 655.053 446.761 653.488 446.834zM736.648 425.799c-14 0.643-25.87-10.195-26.505-24.205-2.59-57.415-51.405-102.017-108.83-99.427-13.985 0.642-25.86-10.202-26.485-24.185-0.635-14.002 10.245-25.867 24.205-26.502 85.375-3.865 157.965 62.455 161.81 147.842 0.57 12.425-7.905 23.162-19.615 25.86C739.753 425.524 738.208 425.726 736.648 425.799zM838.598 430.764c-14.01 0.62-25.865-10.225-26.5-24.21-2.6-57.475-27.425-110.5-69.9-149.322-42.48-38.8-97.53-58.742-155-56.137-14.005 0.62-25.87-10.2-26.5-24.205-0.625-14.007 10.23-25.865 24.2-26.5 71.025-3.21 139.045 21.425 191.529 69.377 52.495 47.947 83.165 113.467 86.37 184.492 0.555 12.432-7.915 23.17-19.62 25.867C841.693 430.466 840.168 430.686 838.598 430.764z" p-id="10045" fill="red"></path>
</svg>

직접 fill 속성을 찾아 그 안의 색상 값을 수정하세요

위 내용은 CSS 배경 이미지에서 svg 사용 소개(예제 포함)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!