알파 화면 반전

Question

흰색과 알파 (투명) 픽셀이 포함 된 작은 아이콘 png 그림이 있습니다. 어떻게 든 "반전"수 CSS (선호) 또는 자바 스크립트를 사용하여 해당 아이콘이 얻을 :

흰색 픽셀 -> 투명 픽셀

투명 픽셀 -> 흰색 픽셀 나는 몇 가지 새로운 CSS 속성이 있습니다 참조

필터 및 마스크와 유사하지만 모든 주요 브라우저가이를 지원하지는 않습니다.

Answer 1

나는 이미 반전 된 두 번째 이미지를 만드는 것이 가장 쉽고 빠른 방법이라고 생각합니다. 당신이 호버에있는 그림을 반전시키고 자한다면, : hover css 클래스를 사용하여 2 개의 이미지를 바꿀 수 있습니다.

#divId:hover{background-image: url('imageName.ext') } 

Answer 2

는 자바 스크립트를 사용하면 픽셀 조작의 모든 종류의 작업을 수행 할 수 있습니다, 그러나 빠른 경로 및 Internet Explorer 8하지 않고 작동하지 않습니다 오래된 것을 나는 당신을 경고한다.

당신이 요청 이후 여기

코드

document.addEventListener('DOMContentLoaded', function() { 
    var canvas = document.getElementById('channelconvert'); 
    var context = canvas.getContext('2d'); 

    var image = new Image(); 
    image.onload = function() { 
    // Draw this image with offset 0x0 
    context.drawImage(this, 0, 0); 
    } 
    image.src = 'test.png'; 

    function invert() { 
    var imageData = context.getImageData(0, 0, canvas.width, canvas.height); 
    var pixels = imageData.data; 

    // Loop through set of fours due to four color channels: red, green, blue, alpha 
    for (var i = 0; i < pixels.length; i += 4) { 
     // Ensure that all color channels are fully white 
     pixels[i] = 255;      // Red channel 
     pixels[i + 1] = 255;     // Green channel 
     pixels[i + 2] = 255;     // Blue channel 
     pixels[i + 3] = 255 - pixels[i + 3]; // Alpha channel 
    } 

    imageData.data = pixels; 

    context.putImageData(imageData, 0, 0); 
    } 

    // Convert channel 
    canvas.addEventListener('mouseover', invert, false); 

    // Reset to the original state 
    canvas.addEventListener('mouseout', invert, false); 
}); 

... 그리고 here is a quick demo 그래서 당신이 체크 아웃 할 수있다 ... 타일러 Crady 제안으로 두 개의 별도의 이미지를 사용하는 것이 좋습니다,하지만 것 HTML 부분은 매우 간단합니다.