In Photoshop if you import a JPG image with a white background into a document with a blue background
, you can make the white background
of the image disappear by setting the image to "multiply" mode.
Can I do exactly the same thing with CSS alone?
In CSS you can use mix-blend-mode
The
mix-blend-mode
CSS property describes how an element content should blend with the content of the element that is below it and the element's background.
body {
margin: 0;
background: url(http://lorempixel.com/1200/1200) no-repeat 0 0 / cover
}
img {
mix-blend-mode: multiply;
}
<img src="//placehold.it/300" />
Or you can use background-blend-mode
The
background-blend-mode
CSS property describes how the element's background images should blend with each other and the element's background color.
div {
width: 300px;
height: 300px;
background: url('https://mdn.mozillademos.org/files/8543/br.png'),url('https://mdn.mozillademos.org/files/8545/tr.png');
background-blend-mode: multiply;
}
<div></div>
IE doesn't support both, see Support here and here
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With