SVG 배경 이미지의 색상 변경 (부트 스트랩 4 캐 러셀)

Question

나는 지금까지 작동하는 다음/이전 컨트롤이있는 BS 4 캐 러셀을 가지고 있습니다. 나는 밝은 배경으로 컨트롤 (현재 흰색)의 색을 변경하고 싶습니다.

HTML :이 단순히 자신의 배경으로 색으로 설정되어 있기 때문에

<div id="carouselQuotes" class="carousel slide quotecaru" data-ride="carousel"> 
<ol class="carousel-indicators"> 
    <li data-target="#carouselQuotes" data-slide-to="0" class="active"></li> 
    <li data-target="#carouselQuotes" data-slide-to="1"></li> 
    <li data-target="#carouselQuotes" data-slide-to="2"></li> 
</ol> 
<div class="carousel-inner"> 
    ... carousel items ... 
</div> 
<a class="carousel-control-prev" href="#carouselQuotes" role="button" data-slide="prev"> 
    <span class="carousel-control-prev-icon" aria-hidden="true"></span> 
    <span class="sr-only">Previous</span> 
</a> 
<a class="carousel-control-next" href="#carouselQuotes" role="button" data-slide="next"> 
    <span class="carousel-control-next-icon" aria-hidden="true"></span> 
    <span class="sr-only">Next</span> 
</a> 

이 지표의 색상을 변경하기가 쉬웠다. 그러나 이전/다음 컨트롤의 배경색이나 색상을 설정해도 실제 컨트롤 아이콘의 색상은 변경되지 않았습니다.

아이콘이 배경 이미지 SVG를 통해 설정되어있는 것으로 나타났습니다.

.carousel-control-prev-icon { 
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E"); 
} 

내가

.carousel-control-prev-icon, .carousel-control-next-icon { 
    fill: #000; 
} 
.carousel-control-prev-icon, .carousel-control-next-icon { 
    fill: '#000'; 
} 
.carousel-control-prev-icon, .carousel-control-next-icon { 
    fill: '%23000'; 
} 

전체 배경 이미지 라인을 무시하지 않고 아이콘의 색상을 변경할 수있는 방법이 있나요

을 시도 : 채우기 색상을 알리는 그것의 일부가?

감사합니다.

Answer 1

CSS 규칙을 사용하여 해당 SVG 배경 이미지의 내용을 스타일 할 수 없습니다. 그것은 파싱되어 처리되고 효과적으로 해독 될 때 비트 맵 이미지로 바뀝니다.

SVG 자체를 변경해야합니다.

fill='%23fff' 

fill='%23000' 

에 나에 어느 색 당신이 원하는을 변경합니다. 여기서 "% 23"은 "#"기호입니다. 이와 같은 데이터 URI에서 사용될 때는 URL-encoded이어야합니다.

div { 
 
    background-color: black; 
 
} 
 

 
button { 
 
    width: 24px; 
 
    height: 24px; 
 
    border: none; 
 
    background-color: transparent; 
 
} 
 

 
.carousel-control-prev-icon { 
 
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E"); 
 
} 
 

 

 
div.inverted { 
 
    background-color: white; 
 
} 
 

 
.inverted .carousel-control-prev-icon { 
 
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23000' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E"); 
 
}

<div> 
 
    <button class="carousel-control-prev-icon"></button> 
 
</div> 
 

 
<div class="inverted"> 
 
    <button class="carousel-control-prev-icon"></button> 
 
</div>