HTML - 투명성

Question

와 PNG 이미지에서 사용자 정의 클릭 모양의 버튼을 구현 I 투명성 다음과 같은 PNG 이미지가 있습니다

내가 HTML & CSS 그 용도에 버튼을하고 싶습니다를 alpha 채널을 마스크로 사용하여 사용자가 분홍색 영역을 클릭하는 경우에만 작동합니다.

그럴 수 있습니까? 어떻게 구현 될 수 있습니까?

Answer 1

당신은 이미지 맵을 당신은 픽셀 값을 얻을 알파 채널 값 확인하기 위해 canvas에 이미지를 그릴 필요 HTML map Tag

Answer 2

체크 아웃 할 수 있습니다

const messageBox = document.getElementById('messageBox'); 
 
const imageButton = document.getElementById('imageButton'); 
 
const canvas = document.createElement('canvas'); 
 
const context = canvas.getContext('2d'); 
 
const width = imageButton.width; 
 
const height = imageButton.height; 
 

 
canvas.width = width; 
 
canvas.height = height; 
 

 
context.drawImage(imageButton, 0, 0, width, height); 
 

 
imageButton.onclick = function(e) { 
 
    const alpha = context.getImageData(e.offsetX, e.offsetY, 1, 1).data[3]; 
 
    
 
    switch (alpha) { 
 
    case 255: 
 
     messageBox.innerText = "Inside clicked"; 
 
     
 
     break; 
 
     
 
    case 0: 
 
     messageBox.innerText = "Outside clicked"; 
 
     
 
     // Here you could do e.preventDefault(); if this is a form submit event or something like that. 
 
     
 
     break; 
 
     
 
    default: 
 
     messageBox.innerText = "Border clicked."; 
 
     
 
     // Decide how to handle clicks in the border or change the switch for an if and define a range of valid and invalid values for the alpha channel. 
 
     
 
     break; 
 
    } 
 
};

#imageButton { 
 
    box-shadow: inset 0 0 0 1px rgba(255, 0, 0, .5); 
 
    cursor: pointer; 
 
    width: 100px; 
 
}

<img id="imageButton" src="data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7" /> 
 

 
<div id="messageBox"></div>

을

참고 Cross-Origin 문제 나 허용 된 것보다 큰 답변을 피하기 위해 이미지 대신 작은 데이터 URI를 사용하고 있습니다.