나는 많은 png 이미지가 있으며, 이제는 색상을 변경하고 싶습니다. 포토샵에서 이러한 모든 이미지를 열고 레이어 스타일 (Color Overlay)을 추가 할 수있었습니다. 예를 들어html5/css3의 색상 오버레이 png
: http://www.iconfinder.com/icondetails/103303/128/arrow_right_sans_icon
변경 회색으로 검은 색입니다.
그러나 HTML5/CSS3에서이 작업을 수행하는 쉬운 방법이 있습니까?
.
자세한 내용은이 링크를 확인하십시오. 두 번째 링크는 물론 약간의 포토샵이 포함
이미지 색조가 PNG 이미지에서 작동하지 않습니다. 두 번째 링크도 배경색과 함께 작동하므로 색상이 화살표가 아닌 전체 div에 사용됩니다. 첫 번째 옵션 (http://stackoverflow.com/questions/7415872/change-color-of-png-image-via-css)으로 가야합니다. – Lilly
그냥 CSS로 가능하지만 완벽한 해결책에서 멀리이다 그래서 큰 한계가있다.
HTML
<img src="http://cdn2.iconfinder.com/data/icons/picol-vector/32/arrow_sans_right-128.png"/>
CSS
img {
-webkit-mask-image:-webkit-linear-gradient(top, rgba(0, 0, 0,.4), rgba(0, 0, 0,.4));
}
한계가
See demo-크롬 26
(A 비트 후반)에서 테스트
당신이 배경이 전체 웹 사이트 전반에 걸쳐 동일한 색상 유지됩니다 알고 있다면 당신은 장난 상관 없어 포토샵에서 조금은, 물론 당신의 배경색으로 투명 부분을 채울 수 있고 그 부분을 투명하게 만들기 위해 아이콘을자를 수 있습니다.
그런 식으로 배경색을 배치하고 원하는 색상으로 만들 수 있습니다.
HTML
<img src="transparencyswitch.png" height="20" width="20"/>
CSS 나는 SVG로 PNG로 변환하는 것이 좋습니다
img {
background-color: grey;
}
. 내가 그랬을 때까지 나는 똑같은 문제를 겪었다. 거기에서 채우기 색 (예 : wordpress와 같이 동적 일 수도 있습니다) 만 변경하면됩니다
가능한 복제본 : http://stackoverflow.com/questions/7415872/change-color-of-png -image-via-css – imbecile
이 작업을 수행 할 수는 있지만이 모든 PNG 이미지를 변경해야합니다. Photoshop에서 이미지를 적용하지 않고 색상을 변경할 수 있는지 궁금합니다. – Lilly
jQuery Mobile 프로젝트가 비슷한 것을하고 있다는 것을 알고 있습니다. 어떻게 확신 할 수는 없지만 조사할만한 가치가있을 것입니다. 이 문제에 대한 html5/css3 솔루션을 찾으면 알려주십시오 (SO). – jjwdesign