CSS를 통해 PNG 이미지의 색상을 변경 하시겠습니까?
투명한 PNG가 단순한 모양을 흰색으로 표시하면 CSS를 통해 어떻게 든 색상을 변경할 수 있습니까? 어떤 종류의 오버레이 또는 그렇지 않은가?
당신과 필터 사용 -webkit-filter과 filter: 필터 브라우저에 아주 새로운과 매우 현대적인 브라우저에서 지원됩니다. 이미지를 회색조, 세피아 등으로 변경할 수 있습니다 (예 참조).
이제 필터를 사용하여 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
그런 다음 png에 다음 필터를 적용해야합니다.
filter: invert(48%) sepia(13%) saturate(3207%) hue-rotate(130deg) brightness(95%) contrast(80%);
아이콘 글꼴을 살펴볼 수 있습니다. 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은 자체 아이콘 글꼴을 사용합니다. Octicons 무료로 다운로드 할 수 있습니다. 또한 고유 한 아이콘 글꼴을 만드는 방법 에 대한 팁도 있습니다 .
img 태그에는 다른 것과 마찬가지로 배경 속성이 있습니다. 스텐실과 같이 투명한 모양의 흰색 PNG가있는 경우 다음을 수행 할 수 있습니다.
<img src= 'stencil.png' style= 'background-color: red'>
SVG 필터를 사용 하여이 작업을 수행 할 수있었습니다. 소스 이미지의 색상과 변경하려는 색상을 곱하는 필터를 작성할 수 있습니다. 아래 코드 스 니펫에서 flood-color 는 이미지 색상을 변경하려는 색상입니다 (이 경우 빨간색). feComposite는 필터에 색상 처리 방법을 알려줍니다. 산술이있는 feComposite의 공식은 (k1 * i1 * i2 + k2 * i1 + k3 * i2 + k4)입니다. 여기서 i1 및 i2는 입력 / 입력 2의 입력 색상입니다. 따라서 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>예 :)
Surfin '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)
에서 대부분의 브라우저 , 당신은 필터를 사용할 수 있습니다 :
모두
<img>다른 요소의 요소와 배경 이미지CSS에서 정적으로 설정하거나 JavaScript를 사용하여 동적으로 설정
아래 데모를 참조하십시오.
<img> 집단
이 기술을 <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>a) 5 년 전에 찾고 있었던 것과 b)이 다른 코드 옵션보다 약간 더 간단한 해결책이 있다고 생각합니다.
흰색 png (예 : 투명 배경의 흰색 아이콘)를 사용하면 :: after 선택기를 추가하여 다시 채색 할 수 있습니다.
.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
인터넷 검색을 하면서이 것을 발견했으며, 나를 위해 가장 잘 작동하는 것을 발견했습니다 ...
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');
}
나를 위해 일한 가장 간단한 한 줄 :
filter: opacity(0.5) drop-shadow(0 0 0 blue);
불투명도를 0에서 1로 조정하여 색상을 밝거나 어둡게 만들 수 있습니다.
특정 색상이 필요했기 때문에 필터가 작동하지 않았습니다.
대신 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>이에 대한 해결책을 찾고 있었기 때문에 대답했습니다.
@chrscblls 답변의 펜은 흰색 또는 검정색 배경이 있지만 잘 작동하지 않으면 잘 작동합니다. 또한 이미지는 ng-repeat로 생성되었으므로 CSS에 URL을 넣을 수 없으며 img 태그에서 :: after를 사용할 수 없습니다.
그래서 나는 해결 방법을 찾았고 사람들이 너무 걸려 넘어지면 도움이 될 것이라고 생각했습니다.
그래서 내가 한 일은 세 가지 주요 차이점과 거의 동일합니다.
- URL이 내 img 태그에 있으면 :: after가 작동하는 다른 div에 태그와 레이블을 넣습니다.
- '혼합 혼합 모드'는 '곱하기'또는 '스크린'대신 '차이'로 설정됩니다.
- :: before를 정확히 동일한 값으로 추가하여 :: after가 :: before에서 만든 '차이'의 '차이'를 수행하고 자체 취소했습니다.
검은 색에서 흰색으로 또는 흰색에서 검은 색으로 변경하려면 배경색이 흰색이어야합니다. 검은 색에서 색상까지 모든 색상을 선택할 수 있습니다. 흰색에서 색상에 이르기까지 원하는 색상의 반대 색상을 선택해야합니다.
.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
아이콘이 하나만 필요한 경우 전체 글꼴 세트가 필요하지 않으며 개별 요소로서 더 "깨끗한"느낌이 듭니다. 따라서 이러한 목적으로 HTML5에서는 문서 흐름 내부에 SVG를 직접 배치 할 수 있습니다. 그런 다음 .CSS 스타일 시트에서 클래스를 정의하고 fill속성을 사용하여 배경색에 액세스 할 수 있습니다.
일 바이올린 : http://jsfiddle.net/qmsj0ez1/
이 예에서는 :hover동작을 설명하는 데 사용 했습니다. "정상"상태의 색상 만 변경하려면 의사 클래스를 제거해야합니다.
문자 적으로 색상을 변경하기 위해 CSS 전환을 -webkit-filter와 통합하여 무언가 발생하는 경우 선택한 -webkit-filter를 호출 할 수 있습니다. 예를 들면 다음과 같습니다.
img {
-webkit-filter:grayscale(0%);
transition: -webkit-filter .3s linear;
}
img:hover
{
-webkit-filter:grayscale(75%);
}
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
참고 URL : https://stackoverflow.com/questions/7415872/change-color-of-png-image-via-css
'Programing' 카테고리의 다른 글
| 스택 추적을 잃지 않고 Java에서 예외를 다시 발생 (0) | 2020.02.23 |
|---|---|
| 컴퓨터 과학에서 NP-complete 란 무엇입니까? (0) | 2020.02.22 |
| 텍스트 파일 끝에 출력을 추가하는 방법 (0) | 2020.02.22 |
| SQL의 인덱스 란 무엇입니까? (0) | 2020.02.22 |
| SQL Management Studio에서 다른 포트 번호를 어떻게 지정합니까? (0) | 2020.02.22 |