Can HTML and CSS only create an overlay which ignores transparent area on an image automatically?

Question

For example, it has an image with a transparent background:

And I would like to add an gray overlay (for example, a div, or canvas...) on it:

But I want the overlay ignores transparent area on an image automatically:

Can pure HTML and CSS (for example, by div, canvas...) do this?

Answer 1

Try the overlay blend-mode. Or multiply! (Not supported by IE or Edge, thanks @Stilltorik)

.multiplied {    background-color: blue;    width:250px;    height: 100px;    margin-top: -100px;    mix-blend-mode: overlay;  }

<div>    <img src='https://i.stack.imgur.com/4yUEW.png'/>    <div class='multiplied'></div>  </div>

Answer 2

A somewhat hacky way:

.alpha-mask {    mask-image: url(https://i.stack.imgur.com/FwTzE.png);    -webkit-mask-image: url(https://i.stack.imgur.com/FwTzE.png);    mask-mode: alpha;    -webkit-mask-mode: alpha;    mask-repeat: no-repeat;    -webkit-mask-repeat: no-repeat;  }    .overlay {    background-color: #000;    position: absolute;    top: 120px;    left: 0;    width: 100%;    height: 100%;    opacity: 0.2;  }

<article class="alpha-mask">    <img class="alpha-target" src="https://i.stack.imgur.com/FwTzE.png" />    <div class="overlay alpha-target">    </div>  </article>

See it working.