0
359
Vistas¿Cómo tinte una imagen blanca que tiene un fondo transparente usando CSS?
Tengo una imagen que tiene:
- Píxeles blancos: me gustaría configurarlos dinámicamente en cualquier color
- Píxeles negros: me gustaría que permanecieran negros
- Píxeles transparentes: me gustaría que se muestren a través del fondo en el que se encuentra actualmente.
Aquí hay un ejemplo de la imagen superpuesta sobre un fondo rojizo:
Me gustaría poder teñir el conejito de cualquier color que me guste, sin recurrir a trucos de fondo porque el color de fondo contra el que se muestra la imagen teñida debería verse sin cambios.
Se prefiere una solución CSS pura, pero las ideas de manipulación de imágenes de JavaScript también son bienvenidas.
El conejito solo:
·
Santiago Trujillo
1 Respuestas
Responde la pregunta0
Usando máscara y modo de fusión puedes hacerlo:
.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