project lab
arrowww
Design & custom software development
lab . our latest works in progress   
Tint image in HTML using Image Opacity & Solid Background Color. Formula
To tint image with CSS, usually we will apply a semitransparent layer on top of it using box-shadow, multiple backgrounds or pseudo elements CSS techniques.

Some time ago I decided to update one of my old (2013) posts - Three ways to tint image with CSS, which is quite well appearing on Google search.
While working on the update I have found an interesting rule, which I have translated into formula.


To tint image with CSS, usually we will apply a semitransparent layer on top of it using box-shadow, multiple backgrounds or pseudo elements CSS techniques.

Now! If we will do opposite - first solid background color and then, on top of it semitransparent image, the result going to be the same.

The rule

Image + Color with 0.4 opacity = Color + Image with 0.6 opacity

The formula

x + zy = y + (1 - z)x

Tint image in HTML using Image Opacity & Solid Background Color. Formula

CSS, HTML code example

Tint image using Image Opacity

HTML

<div class="wrap">
<img src="image.png">
</div>

CSS

.wrap {
position: relative;
display: inline-block;
background: rgb(204, 0, 255);
}
.wrap img {
display: block;
width: 100%;
opacity: 0.6;
}