JS/CSS로 PNG를 뒤집을 수 있습니까?

Ive는 많은 PNG 아이콘이있는 사이트를 가지고 있습니다. 모두 흰색과 검은 색 이미지입니다. 흰색 배경에 검은 색 로고가 그려져 있습니다.JS/CSS로 PNG를 뒤집을 수 있습니까?

현재 우리는 첫 번째 PNG를 숨기고 뒤집힌 PNG를 드러내는 순간에 우리는 2 개의 이미지를 내보내는 순간에 : 1) 흰색 배경에 검은 색 로고, 2) 포토샵에서 배경에 흰색 로고 .

JS가 가능하거나 새로운 연령의 CSS를 사용하여 png 파일을 반전 할 수 있습니까?

내가 .svg 내가 그들을이 있다면,

불행하게도이 내가이 .PNG 파일이 제 3 자 이미지입니다 (반전으로 내가 비자 흰색에 검은 색 이미지의 블랙에 대한 반대의 흰색을 교환 평균) 나는 'the fly'라는 .svg를 뒤집을 수 있다는 것을 알고있다.

출처

2016-07-08 sam

에서 기사,하지만 그것은 단지 웹킷 브라우저에서 지원되는 것 : http://stackoverflow.com/questions/ 17741629/invert-color-using-css –

PNG를 캔버스로 렌더링하고, 이미지 데이터를 가져와 (픽셀로 가져올 수 있음), 픽셀을 반전하고, 이미지 데이터를 가져 와서 '캔버스'를 지원하는 모든 브라우저에서이 작업을 수행 할 수 있습니다. 결과. 나는 해 본 적이 없지만 솔직하게 말해야합니다. –

이 주제는 조금 벗어나지 만 Cloudine과 같은 클라우드 이미지 서비스를 사용할 때 이미지 URL 만 변경하면 많은 필터를 적용 할 수 있습니다. 변환은 서버 측에서 수행 된 다음 캐시됩니다 (브라우저는 여전히이를 별도의 이미지로 처리합니다). http://cloudinary.com/documentation/image_transformation_reference#effect_parameter – thmshd

예 CSS의 필터를 사용하십시오. 아래 코드를 참조하십시오.

img:hover { 
 
-webkit-filter: grayscale(1) invert(1); 
 
filter: grayscale(1) invert(1); 
 
}

<img src="https://newevolutiondesigns.com/images/freebies/black-white-background-1.jpg">

출처

2016-07-08 09:44:26

CSS의 필터 invert 기능은 꽤 잘 작동합니다. 이 question

는 이 질문 훨씬 더 많은 답변을 보인다.
CSS 필터에 대한 추가 정보 : Alex Danilo의 굉장한 article.
그리고, 내 개인 좋아하는, 당신은 CSS에서`filter` 속성을 사용할 수 있습니다 CSS-tricks

출처

2016-07-08 10:08:38 joshuamabina

JS/CSS로 PNG를 뒤집을 수 있습니까?

답변

관련 문제