0
361
VistasHow do I tint a white image that has a transparent background, using CSS?
I have an image that has:
- White pixels: I would like to dynamically set these to any colour
- Black pixels: I would like these to remain black
- Transparent pixels: I would like these to show through whatever background it is currently on.
Here is an example of the image overlaid on a reddish background:
I would like to be able to tint the bunny any colour I like, without resorting to background tricks because the background colour that the tinted image is shown against, should show through unchanged.
A pure CSS solution is preferred, but javascript image manipulation ideas are also welcome.
The bunny by itself:
·
Santiago Trujillo
1 Respuestas
Responde la pregunta0
Using mask and blend mode you can do it:
.bunny {
--img: url(https://i.ibb.co/ngFGkgy/clOwR.png); /* Your png */
width: 32px;
aspect-ratio: 1;
background: var(--img) center/cover;
background-blend-mode: darken;
-webkit-mask: var(--img) center/cover;
mask: var(--img) center/cover;
background-color: red; /* the color */
}<div class="bunny"></div>
<div class="bunny" style="width:100px;background-color:green"></div>
<div class="bunny" style="width:100px;background-color:blue"></div>
·
Santiago Trujillo
Denunciar
Responde la pregunta