title: Can HTML and CSS only create an overlay which ignores transparent area on an image automatically?
body: <p>For example, it has an image with a transparent background:</p>
  
  <p><a href="https://i.stack.imgur.com/4yUEW.png" rel="noreferrer"><img src="https://i.stack.imgur.com/4yUEW.png" alt="Enter image description here"></a></p>
  
  <p>And I would like to add an gray overlay (for example, a div, or canvas...) on it:</p>
  
  <p><a href="https://i.stack.imgur.com/YzNOS.png" rel="noreferrer"><img src="https://i.stack.imgur.com/YzNOS.png" alt="Enter image description here"></a></p>
  
  <p>But I want the overlay ignores transparent area on an image automatically:</p>
  
  <p><a href="https://i.stack.imgur.com/ET46g.png" rel="noreferrer"><img src="https://i.stack.imgur.com/ET46g.png" alt="Enter image description here"></a></p>
  
  <p>Can pure HTML and CSS (for example, by div, canvas...) do this?</p>