CSS를 통해 PNG 이미지의 색상을 변경하시겠습니까?
흰색으로 간단한 모양을 표시하는 투명 PNG를 고려할 때, CSS를 통해 어떻게든 이것의 색상을 변경할 수 있습니까?오버레이 같은 거요?
는 필를사수있다니와 함께 할 수 .-webkit-filter그리고.filter필터는 브라우저에 비교적 새로운 기능이지만 다음과 같은 Can에 따라 90% 이상의 브라우저에서 지원됩니다.Ise 표: https://caniuse.com/ #http=http-http://-
영상을 그레이스케일, 세피아 등으로 변경할 수 있습니다(예 참조).
이제 필터를 사용하여 PNG 파일의 색을 변경할 수 있습니다.
body {
background-color:#03030a;
min-width: 800px;
min-height: 400px
}
img {
width:20%;
float:left;
margin:0;
}
/*Filter styles*/
.saturate { filter: saturate(3); }
.grayscale { filter: grayscale(100%); }
.contrast { filter: contrast(160%); }
.brightness { filter: brightness(0.25); }
.blur { filter: blur(3px); }
.invert { filter: invert(100%); }
.sepia { filter: sepia(100%); }
.huerotate { filter: hue-rotate(180deg); }
.rss.opacity { filter: opacity(50%); }<!--- img src http://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF_retouched.jpg/500px-Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF_retouched.jpg -->
<img alt="Mona Lisa" src="https://images.pexels.com/photos/40997/mona-lisa-leonardo-da-vinci-la-gioconda-oil-painting-40997.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" title="original">
<img alt="Mona Lisa" src="https://images.pexels.com/photos/40997/mona-lisa-leonardo-da-vinci-la-gioconda-oil-painting-40997.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" title="saturate" class="saturate">
<img alt="Mona Lisa" src="https://images.pexels.com/photos/40997/mona-lisa-leonardo-da-vinci-la-gioconda-oil-painting-40997.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" title="grayscale" class="grayscale">
<img alt="Mona Lisa" src="https://images.pexels.com/photos/40997/mona-lisa-leonardo-da-vinci-la-gioconda-oil-painting-40997.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" title="contrast" class="contrast">
<img alt="Mona Lisa" src="https://images.pexels.com/photos/40997/mona-lisa-leonardo-da-vinci-la-gioconda-oil-painting-40997.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" title="brightness" class="brightness">
<img alt="Mona Lisa" src="https://images.pexels.com/photos/40997/mona-lisa-leonardo-da-vinci-la-gioconda-oil-painting-40997.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" title="blur" class="blur">
<img alt="Mona Lisa" src="https://images.pexels.com/photos/40997/mona-lisa-leonardo-da-vinci-la-gioconda-oil-painting-40997.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" title="invert" class="invert">
<img alt="Mona Lisa" src="https://images.pexels.com/photos/40997/mona-lisa-leonardo-da-vinci-la-gioconda-oil-painting-40997.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" title="sepia" class="sepia">
<img alt="Mona Lisa" src="https://images.pexels.com/photos/40997/mona-lisa-leonardo-da-vinci-la-gioconda-oil-painting-40997.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" title="huerotate" class="huerotate">
<img alt="Mona Lisa" src="https://images.pexels.com/photos/40997/mona-lisa-leonardo-da-vinci-la-gioconda-oil-painting-40997.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" title="opacity" class="rss opacity">나는 당신이 16진수 색상 값을 삽입하고 이 색상을 png에 적용하는 데 필요한 필터를 반환하는 이 훌륭한 코드펜 예제를 발견했습니다.
검은색에서 대상 16진수 색상으로 변환할 CSS 필터 생성기
예를 들어, 나는 다음과 같은 색을 갖기 위해 내 png이 필요했습니다 #1a9790.
그러면 당신은 다음 필터를 당신에게 적용해야 합니다.
filter: invert(48%) sepia(13%) saturate(3207%) hue-rotate(130deg) brightness(95%) contrast(80%);
PS: 코드펜은 여기서 MultiplyByZer0의 훌륭한 답변을 기반으로 합니다.CSS 필터만 사용하여 검은색을 임의의 색상으로 변환하는 방법
모든 크레딧은 그에게 전달됩니다.
아이콘 글꼴을 확인하는 것이 좋습니다.http://css-tricks.com/examples/IconFont/
편집: 최근 프로젝트에서 Font-Awesome을 사용하고 있습니다.부트스트랩도 가능합니다.간단히 이것을 당신의 안에 넣으세요.<head>:
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css" rel="stylesheet">
<!-- And if you want to support IE7, add this aswell -->
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome-ie7.min.css" rel="stylesheet">
그런 다음 다음 다음과 같은 아이콘 링크를 추가합니다.
<a class="icon-thumbs-up"></a>
--편집--
Font-Awesome은 새로운 버전에서 다른 클래스 이름을 사용하는데, 아마도 이것이 CSS 파일을 엄청나게 작게 만들고 모호한 CSS 클래스를 피하기 때문일 것입니다.이제 다음을 사용해야 합니다.
<a class="fa fa-thumbs-up"></a>
편집 2:
Github도 자체 아이콘 글꼴을 사용한다는 것을 방금 알았습니다.Octicon 다운로드는 무료입니다.또한 자체 아이콘 글꼴을 만드는 방법에 대한 팁도 제공합니다.
제게 효과가 있었던 가장 간단한 한 줄은:
filter: opacity(0.5) drop-shadow(0 0 0 blue);
불투명도를 0에서 1로 조정하여 색상을 더 밝게 하거나 어둡게 할 수 있습니다.
SVG 필터를 사용해서 할 수 있었습니다.원본 이미지의 색과 변경하려는 색을 곱하는 필터를 작성할 수 있습니다.아래 코드 조각에서 플러드 색상은 이미지 색상을 변경할 색상(이 경우 빨간색)입니다. feComposite는 필터에 색상 처리 방법을 알려줍니다.산술을 사용하는 feComposite의 공식은 (k1*i1*i2 + k2*i1 + k3*i2 + k4)이며, 여기서 i1과 i2는 그에 따라 in/in2에 대한 입력 색상입니다.따라서 k1=1만 지정하면 i1*i2만 수행되므로 두 입력 색상을 함께 곱하는 것을 의미합니다.
참고: 인라인 SVG를 사용하므로 HTML5에서만 작동합니다.하지만 SVG를 별도의 파일에 넣으면 오래된 브라우저로 이 작업을 할 수 있을 것 같습니다.저는 아직 그런 접근법을 시도해 본 적이 없습니다.
다음은 스니펫입니다.
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="60" height="90" style="float:left">
<defs>
<filter id="colorMask1">
<feFlood flood-color="#ff0000" result="flood" />
<feComposite in="SourceGraphic" in2="flood" operator="arithmetic" k1="1" k2="0" k3="0" k4="0" />
</filter>
</defs>
<image width="100%" height="100%" xlink:href="http://i.stack.imgur.com/OyP0g.jpg" filter="url(#colorMask1)" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="60" height="90" style="float:left">
<defs>
<filter id="colorMask2">
<feFlood flood-color="#00ff00" result="flood" />
<feComposite in="SourceGraphic" in2="flood" operator="arithmetic" k1="1" k2="0" k3="0" k4="0" />
</filter>
</defs>
<image width="100%" height="100%" xlink:href="http://i.stack.imgur.com/OyP0g.jpg" filter="url(#colorMask2)" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="60" height="90" style="float:left">
<defs>
<filter id="colorMask3">
<feFlood flood-color="#0000ff" result="flood" />
<feComposite in="SourceGraphic" in2="flood" operator="arithmetic" k1="1" k2="0" k3="0" k4="0" />
</filter>
</defs>
<image width="100%" height="100%" xlink:href="http://i.stack.imgur.com/OyP0g.jpg" filter="url(#colorMask3)" />
</svg>네 :)
Safari 서핑 - 블로그 아카이브 » CSS 마스크
WebKit는 이제 CSS에서 알파 마스크를 지원합니다.마스크를 사용하면 최종 디스플레이에서 상자의 일부를 제거하는 데 사용할 수 있는 패턴으로 상자의 내용을 오버레이할 수 있습니다.즉, 이미지의 알파를 기반으로 복잡한 모양으로 클립할 수 있습니다.
[...]
우리는 웹 디자이너들에게 이러한 마스크와 마스크가 어떻게 적용되는지에 대한 많은 통제력을 제공하기 위해 새로운 속성을 도입했습니다.새 속성은 이미 존재하는 배경 및 테두리 이미지 속성과 유사합니다.-webkit-mask (background) -webkit-mask-attachment (background-attachment) -webkit-mask-clip (background-clip) -webkit-mask-origin (background-origin) -webkit-mask-image (background-image) -webkit-mask-repeat (background-repeat) -webkit-mask-composite (background-composite) -webkit-mask-box-image (border-image)
이에 대한 해결책이 있다고 생각합니다. a) 정확히 당신이 5년 전에 찾던 것이고 b) 여기 있는 다른 코드 옵션보다 조금 더 간단합니다.
흰색 png(예: 투명 배경의 흰색 아이콘)을 사용하면 :: 선택기 뒤에 리콜러를 추가할 수 있습니다.
.icon {
background: url(img/icon.png); /* Your icon */
position: relative; /* Allows an absolute positioned psuedo element */
}
.icon::after{
position: absolute; /* Positions psuedo element relative to .icon */
width: 100%; /* Same dimensions as .icon */
height: 100%;
content: ""; /* Allows psuedo element to show */
background: #EC008C; /* The color you want the icon to change to */
mix-blend-mode: multiply; /* Only apply color on top of white, use screen if icon is black */
}
다음 코드펜을 참조하십시오. http://codepen.io/chrscblls/pen/bwAXZO
<img>및CSS에서 정적으로 설정하거나 JavaScript를 사용하여 동적으로 설정합니다.
아래 데모를 참조하십시오.
<img>
은 이기을에수있다습니적할용술▁a에 적용할 수 .<img>접두사:
#original, #changed {
width: 45%;
padding: 2.5%;
float: left;
}
#changed {
-webkit-filter : hue-rotate(180deg);
filter : hue-rotate(180deg);
}<img id="original" src="http://i.stack.imgur.com/rfar2.jpg" />
<img id="changed" src="http://i.stack.imgur.com/rfar2.jpg" />배경 이미지
이 기법을 배경 이미지에 적용할 수 있습니다.
#original, #changed {
background: url('http://i.stack.imgur.com/kaKzj.jpg');
background-size: cover;
width: 30%;
margin: 0 10% 0 10%;
padding-bottom: 28%;
float: left;
}
#changed {
-webkit-filter : hue-rotate(180deg);
filter : hue-rotate(180deg);
}<div id="original"></div>
<div id="changed"></div>자바스크립트
JavaScript를 사용하여 런타임에 필터를 설정할 수 있습니다.
var element = document.getElementById("changed");
var filter = 'hue-rotate(120deg) saturate(2.4)';
element.style['-webkit-filter'] = filter;
element.style['filter'] = filter;#original, #changed {
margin: 0 10%;
width: 30%;
float: left;
background: url('http://i.stack.imgur.com/856IQ.png');
background-size: cover;
padding-bottom: 25%;
}<div id="original"></div>
<div id="changed"></div>img 태그는 다른 태그와 마찬가지로 배경 속성을 가집니다.스텐실처럼 투명한 모양의 흰색 PNG가 있으면 다음 작업을 수행할 수 있습니다.
<img src= 'stencil.png' style= 'background-color: red'>
사진을 검은색에서 흰색으로 변경하거나 흰색에서 검은색으로 변경할 때 검은색과 흰색은 기술적으로 색상이 아니기 때문에 색상 회전 필터가 작동하지 않습니다.대신 반전 필터 속성을 사용하여 검은색과 흰색의 색상 변경(검정에서 흰색 또는 그 반대)을 수행해야 합니다.
.img1 { filter: invert(100%); }
구글 검색 중에 이걸 발견했고, 나에게 가장 적합한 것을 발견했습니다.
HTML
<div class="img"></div>
CSS
.img {
background-color: red;
width: 60px;
height: 60px;
-webkit-mask-image: url('http://i.stack.imgur.com/gZvK4.png');
}
이것에 대한 해결책을 찾고 있었기 때문에 대답했습니다.
만약 당신이 흰색이나 검은색 배경을 가지고 있다면, @nbscbls의 펜은 잘 작동하지만, 나의 것은 그렇지 않았습니다.또한, 이미지는 ng-repeat으로 생성되었기 때문에, 나는 그것들의 URL을 내 CSS에 가질 수 없었고 당신은 img 태그에서 ::을 사용할 수 없습니다.
그래서 저는 사람들이 여기서 발을 헛디뎌도 도움이 될 것이라고 생각했습니다.
그래서 제가 한 것은 세 가지 주요 차이점과 거의 비슷합니다.
- URL은 내 img 태그에 있고, 나는 그것(그리고 라벨)을 :: 이후가 작동할 다른 디빈에 넣었습니다.
- 'mix-discovery-mode'는 'screen' 또는 'screen'이 아닌 '차이'로 설정됩니다.
- 정확히 같은 값을 가진 ::fore를 추가하여 ::fore가 ::fore가 만든 '차이'를 수행하도록 하고 스스로 취소했습니다.
검은색에서 흰색 또는 흰색 또는 검은색으로 변경하려면 배경색이 흰색이어야 합니다.검은색부터 색상까지, 당신은 어떤 색상이든 선택할 수 있습니다.흰색부터 색상까지 원하는 색상과 반대 색상을 선택해야 합니다.
.divClass{
position: relative;
width: 100%;
height: 100%;
text-align: left;
}
.divClass:hover::after, .divClass:hover::before{
position: absolute;
width: 100%;
height: 100%;
background: #FFF;
mix-blend-mode: difference;
content: "";
}
https://codepen.io/spaceplant/pen/oZyMYG
제가 이 답변을 올린 이후로 저는 다른 방법을 사용하여 다른 펜을 만들었습니다.
* {
box-sizing: border-box;
}
body {
background-color: CadetBlue;
font-family: "Lato", sans-serif;
text-align: center;
}
button {
display: flex;
justify-content: center;
min-width: 182px;
padding: 0.5em 1em;
margin: 2em auto;
cursor: pointer;
pointer-events: auto;
border-radius: 4px;
border: none;
background: #85b5b7;
box-shadow: 0 6px #6fa8aa;
}
label {
font-weight: 400;
font-size: 24px;
margin: auto 0;
color: white;
}
.icon {
height: 64px;
width: 64px;
background-color: white;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: left center;
mask-position: left center;
-webkit-mask-size: auto 48px;
mask-size: auto 48px;
mask-mode: luminance;
-webkit-mask-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/d/d1/Bubbles-alt-icon.png/640px-Bubbles-alt-icon.png");
mask-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/d/d1/Bubbles-alt-icon.png/640px-Bubbles-alt-icon.png");
}
button label span {
color: #395f60;
}
button:hover {
color: #395f60;
transform: translatey(4px);
box-shadow: 0 2px #6fa8aa;
}
button:hover .icon {
background-color: #395f60;
}<button>
<div class="icon"></div>
<label> white to <span>color</span></label>
</button>/* change image color to white */
filter: invert(100%) sepia(16%) saturate(7463%) hue-rotate(222deg) brightness(119%) contrast(115%);
/* change image color to red */`
filter: invert(16%) sepia(99%) saturate(7404%) hue-rotate(4deg) brightness(95%) contrast(118%);
/* change image color to green */
filter: invert(26%) sepia(89%) saturate(1583%) hue-rotate(95deg) brightness(96%) contrast(106%);
/* change image color to blue */
filter: invert(10%) sepia(90%) saturate(5268%) hue-rotate(245deg) brightness(109%) contrast(155%);
특정 색상이 필요해서 필터가 작동하지 않았습니다.
대신, 저는 CSS 다중 배경 이미지와 선형 기울기 함수(이미지 자체를 생성함)를 활용하여 div를 만들었습니다.오버레이 혼합 모드를 사용하는 경우 실제 이미지는 원하는 색상이 포함된 생성된 "그라디언트" 이미지(여기서 #BADA55)와 혼합됩니다.
.colored-image {
background-image: linear-gradient(to right, #BADA55, #BADA55), url("https://i.imgur.com/lYXT8R6.png");
background-blend-mode: overlay;
background-size: contain;
width: 200px;
height: 200px;
}<div class="colored-image"></div>사용해 보십시오.
-webkit-filter: brightness(0) invert(1);
filter: brightness(0) invert(1);
16진수 색상 값을 삽입하면 이 색상을 png에 적용하는 데 필요한 필터를 반환하는 이 훌륭한 코드펜 예제를 사용합니다.
검은색에서 대상 16진수 색상으로 변환할 CSS 필터 생성기
예를 들어, 나는 다음과 같은 색을 갖기 위해 내 png이 필요했습니다 #EF8C57.
그런 다음 다음 다음 필터를 young Result에 적용해야 합니다.
filter: invert(76%) sepia(30%) saturate(3461%) hue-rotate(321deg) brightness(98%) contrast(91%);
body{
background: #333 url(/images/classy_fabric.png);
width: 430px;
margin: 0 auto;
padding: 30px;
}
.preview{
background: #ccc;
width: 415px;
height: 430px;
border: solid 10px #fff;
}
input[type='radio'] {
-webkit-appearance: none;
-moz-appearance: none;
width: 25px;
height: 25px;
margin: 5px 0 5px 5px;
background-size: 225px 70px;
position: relative;
float: left;
display: inline;
top: 0;
border-radius: 3px;
z-index: 99999;
cursor: pointer;
box-shadow: 1px 1px 1px #000;
}
input[type='radio']:hover{
-webkit-filter: opacity(.4);
filter: opacity(.4);
}
.red{
background: red;
}
.red:checked{
background: linear-gradient(brown, red)
}
.green{
background: green;
}
.green:checked{
background: linear-gradient(green, lime);
}
.yellow{
background: yellow;
}
.yellow:checked{
background: linear-gradient(orange, yellow);
}
.purple{
background: purple;
}
.pink{
background: pink;
}
.purple:checked{
background: linear-gradient(purple, violet);
}
.red:checked ~ img{
-webkit-filter: opacity(.5) drop-shadow(0 0 0 red);
filter: opacity(.5) drop-shadow(0 0 0 red);
}
.green:checked ~ img{
-webkit-filter: opacity(.5) drop-shadow(0 0 0 green);
filter: opacity(.5) drop-shadow(0 0 0 green);
}
.yellow:checked ~ img{
-webkit-filter: opacity(.5) drop-shadow(0 0 0 yellow);
filter: opacity(.5) drop-shadow(0 0 0 yellow);
}
.purple:checked ~ img{
-webkit-filter: opacity(.5) drop-shadow(0 0 0 purple);
filter: opacity(.5) drop-shadow(0 0 0 purple);
}
.pink:checked ~ img{
-webkit-filter: opacity(.5) drop-shadow(0 0 0 pink);
filter: opacity(.5) drop-shadow(0 0 0 pink);
}
img{
width: 394px;
height: 375px;
position: relative;
}
.label{
width: 150px;
height: 75px;
position: absolute;
top: 170px;
margin-left: 130px;
}
::selection{
background: #000;
}<div class="preview">
<input class='red' name='color' type='radio' />
<input class='green' name='color' type='radio' />
<input class='pink' name='color' type='radio' />
<input checked class='yellow' name='color' type='radio' />
<input class='purple' name='color' type='radio' />
<img src="https://i.stack.imgur.com/bd7VJ.png"/>
</div>출처: https://codepen.io/taryaoui/pen/EKkcu
가 있었던 은 제게효솔은션을 사용하는 이었습니다.filter: drop-shadow
: shadow드운일다작과 다르게 합니다.box-shadow.
filter그림자를 실제 모양에 적용하여 투명한 이미지를 지원합니다.
이제 요령은 실제 이미지를 '숨기고' 그림자만 보여주는 것입니다.
https://jsfiddle.net/d4m8x0qb/2
내 사용 사례는 아이콘 색상을 단색으로 수정하는 것이므로 이 방법은 나에게 적합하지만 다른 사용 사례에는 적합하지 않을 수 있습니다.
아이콘이 하나만 필요하다면 전체 글꼴 세트가 필요하지 않으며, 개별 요소로서 더 "깨끗"하다고 생각합니다.따라서 HTML5에서 SVG를 문서 흐름 바로 안쪽에 배치할 수 있습니다.그런 다음 에서 클래스를 정의할 수 있습니다.CSS 스타일시트를 사용하여 배경색에 액세스합니다.fill속성:
작업용 바이올린: http://jsfiddle.net/qmsj0ez1/
참고로, 이 예에서는 다음과 같이 사용했습니다.:hover동작을 설명합니다. "정상" 상태에 대한 색상만 변경하려면 유사 클래스를 제거해야 합니다.
문자 그대로 색상을 변경하기 위해 CSS 전환을 -webkit-filter와 통합할 수 있습니다. -webkit-filter는 어떤 일이 발생했을 때 원하는 -webkit-filter를 호출할 수 있습니다.예:
img {
-webkit-filter:grayscale(0%);
transition: -webkit-filter .3s linear;
}
img:hover
{
-webkit-filter:grayscale(75%);
}
사용할 수 있습니다.filter: hue-rotate(Ndeg)그러나 이미지가 흑백이면 색상이 변경되지 않습니다.
하지만, 당신은 그것을 결합할 수 있습니다.filter: sepia(100)그것은 이미지에 색을 더할 것입니다.hue-rotateCAN 변경을 필터링합니다.
세피아는 다소 불포화도가 높은 색상을 추가하므로, 그것을 조금 더 강화합니다.filter: saturate(50);그래서 좀 더 깊은 컬러감이 있고요.hue-rotate더 나은 작업을 할 수 있습니다.
그런 다음 이들을 모두 결합합니다.
filter: sepia(100) saturate(50) hue-rotate(280deg)
그런 다음 원하는 색상을 찾을 때까지 회전도를 실험합니다.
이것은 제가 사용하는 방식이며 완벽하게 작동합니다.
.RedImage {
filter:
brightness(1000%) grayscale(100%) /* To change the image color to the white */
opacity(0.1) /* To apply the color all over the image */
drop-shadow(0 0 0 red) /* To apply my costum color */
drop-shadow(0 0 0 red) /* To apply my costum color more stronger */
drop-shadow(0 0 0 red)
drop-shadow(0 0 0 red)
drop-shadow(0 0 0 red);
}<img class="RedImage" height="50px" src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_150x54dp.png" />즐기세요...
- 벡터 이미지처럼 이미지가 단순하면 SVG로 변환하여 거기서 CSS 변경을 수행할 수 있습니다.
- 다른 옵션은 이미지를 PNG로 만들고 특정 색상을 투명(컷아웃 등)으로 변경하고 CSS를 사용하여 배경 색상을 변경합니다.
대답: 검은 모양
검은 모양의 PNG에 대한 Vasan 답변 개선입니다 - use svg<image>태그 지정 및 정의filter(dgg 필터는 css 필터보다 더 강력합니다.)
<svg>
<defs>
<filter id="colorMask">
<feFlood flood-color="#ff0000" result="flood" />
<feColorMatrix result="inv" in="SourceGraphic" type="matrix" values="-1 0 0 0 1 0 -1 0 0 1 0 0 -1 0 1 0 0 0 1 0" />
<feComposite in="inv" in2="flood" operator="arithmetic" k1="1" k2="0" k3="0" k4="0" />
</filter>
</defs>
<image filter="url(#colorMask)" xlink:href="pic.png" />
</svg>
<svg width=37px height=36px>
<defs>
<filter id="colorMask">
<feFlood flood-color="#ff0000" result="flood" />
<feColorMatrix result="inv" in="SourceGraphic" type="matrix" values="-1 0 0 0 1 0 -1 0 0 1 0 0 -1 0 1 0 0 0 1 0" />
<feComposite in="inv" in2="flood" operator="arithmetic" k1="1" k2="0" k3="0" k4="0" />
</filter>
</defs>
<image filter="url(#colorMask)" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACUAAAAkBAMAAAD87O6VAAAACXBIWXMAAAsSAAALEgHS3X78AAAALVBMVEUAAABHcEwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADMHXDdAAAAD3RSTlPAAIBAMNAgsOBQYKAQkHD2u9I6AAAAh0lEQVQoz2OwYEAHBQxGguiAYaDFrAMY2heiiiUUCwqKqU5EFhNpBpEyvMhiHo5gnrQiklgI1PhghJiUIlTMASEmehAqJu4IF0uHOQ2sASIGd7cYI1xME+4H/GLY9GKzA5tbsLkZ5jeZECxh8BA5rDrBtjKhhiknRpiCwz584SBJByhiWNIuAFBkOlCFUBO4AAAAAElFTkSuQmCC" />
</svg>
<!-- Original image (for comparision) -->
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACUAAAAkBAMAAAD87O6VAAAACXBIWXMAAAsSAAALEgHS3X78AAAALVBMVEUAAABHcEwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADMHXDdAAAAD3RSTlPAAIBAMNAgsOBQYKAQkHD2u9I6AAAAh0lEQVQoz2OwYEAHBQxGguiAYaDFrAMY2heiiiUUCwqKqU5EFhNpBpEyvMhiHo5gnrQiklgI1PhghJiUIlTMASEmehAqJu4IF0uHOQ2sASIGd7cYI1xME+4H/GLY9GKzA5tbsLkZ5jeZECxh8BA5rDrBtjKhhiknRpiCwz584SBJByhiWNIuAFBkOlCFUBO4AAAAAElFTkSuQmCC">언급URL : https://stackoverflow.com/questions/7415872/change-color-of-png-image-via-css
'programing' 카테고리의 다른 글
| postgresql 테이블이 있지만 쿼리할 때 "관계가 존재하지 않습니다"를 가져옵니다. (0) | 2023.05.03 |
|---|---|
| 각각 외부 키인 요소의 PostgreSQL 배열 (0) | 2023.05.03 |
| Eclipse에서 철자 검사를 영구적으로 해제 (0) | 2023.05.03 |
| 지점 이름 내에서 사용할 수 없는 문자는 무엇입니까? (0) | 2023.05.03 |
| 깃허브 같은 깃서버? (0) | 2023.05.03 |