Hacer que el fondo blanco de la imagen sea transparente en css

Tengo dos imágenes, una de las cuales es un pequeño icono que se superpone sobre la primera imagen. Mi icono tiene un fondo blanco, por lo que cuando el icono se coloca sobre la otra imagen, obtenemos este efecto cuando aparece un cuadrado blanco sobre la imagen. Idealmente, no quiero mostrar este fondo blanco sobre mi otra imagen. ¿Existe alguna propiedad CSS que pueda aplicar a mi icono para hacer que su fondo blanco sea transparente?Hacer que el fondo blanco de la imagen sea transparente en css

Fuente

2012-09-30 Nick

Puede hacer que el fondo del icono sea transparente con herramientas como Photoshop. – Kedume

No puede hacer lo que quiera con CSS, tiene que usar una herramienta de edición de imágenes, como dijo el comentador anterior. – depa

-6

La mejor manera es usar un software como photoshop o Paint.Net.

Recomiendo Paint.Net. Debe eliminar el fondo blanco en Paint.Net y guardar el img como .png.

Fuente

2012-09-30 16:23:37 Devaffair

El OP pidió hacer eso con CSS. Si no es posible, la respuesta correcta es "no" – Paolo

De acuerdo con @Paolo aquí, no respondió esta pregunta. –

Respuestas como esta realmente me molestan porque simplemente dejan de lado por completo la pregunta y responden algo completamente diferente. Digamos, por ejemplo, que estás conectando un gráfico de precios de acciones desde una fuente externa. No se puede copiar exactamente el archivo en paint.net cada minuto y modificarlo, ¿o sí? –

No, todavía no ...

Se ISS conseguir muy cerca posible, aunque. Echa un vistazo a este artículo sobre CSS Filters, una función de css experimental, que está haciendo algunas cosas del lado del cliente que son limpias.

CSS Filters

Fuente

2014-11-14 16:23:53

Los filtros CSS ahora están activados por defecto en Firefox. –

En realidad hay una manera, aunque admite sólo actualmente en Chrome, Firefox y Safari. Si el color de fondo es blanco, se puede añadir la propiedad CSS:

mix-blend-mode: multiply;

Puede leer más sobre esto aquí: https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode

Fuente

2015-12-15 19:41:28 user1822264

guau, sé que pensé que esto era posible, ¡¡¡¡¡¡¡¡¡¡Genial !!! – dreamweiver

¡Funciona como una magia! ¡Gran respuesta! –

¡Pero esta técnica no funcionaba para el navegador IE! –

mix-blend-mode funciona para algunos navegadores, pero hemos encontrado que hace que el rendimiento problemas en cromo, No tengo idea de por qué.

es este hack genio donde se crea una capa que es en su mayoría transparente, pero cuando se coloca sobre un fondo blanco, su color coincidirá con el color del fondo circundante.

No recuerdo donde encontramos el corte, si alguien sabe donde se publicó, por favor hágamelo saber en los comentarios

La forma en que se encuentra este color "mágica"; es calculando cuánto más oscuro debe ser cada eje de color para la cantidad de opacidad eliminada. La fórmula para esto es 255 - (255 - x)/opacity. El problema es: si la opacidad es demasiado baja, la fórmula le da números negativos (que no se pueden usar). Si la opacidad es demasiado alta, obtendrá algo de color en las partes no blancas de su imagen.
Inicialmente usamos una hoja de cálculo que haría los cálculos y, a través de prueba y error manual, encontraríamos el color de Goldilox.
Una vez que empezamos a usar sass me di cuenta de que esto se puede lograr con una búsqueda binaria. Así que creé una función sass que hace el trabajo por nosotros.

Echa un vistazo this gist en sassmeister. Pase el color de fondo a la función opacitator en la línea 56 del código sass. y usa el color rgba generado en un div (o un pseudo elemento) para superponer la imagen.

Fuente

2016-09-08 16:38:17 dovidweisz

Puede hacer un contenedor para su imagen. Entonces, para el css del contenedor:

overflow:hidden; height: (depends on your image, then make it a smaller px); width:100%;

espero que ayude. :)

Fuente

2017-06-15 02:43:44 DrawdeX

Hacer que el fondo blanco de la imagen sea transparente en css

Respuesta

Cuestiones relacionadas