CSS usando "data:"

que he visto en algunos sitios que se pueden incluir imágenes en CSS utilizando una palabra clave "datos":CSS usando "data:"

.stuff { 
    background: transparent url(data:image/gif;base64,SOMEWEIRDCODEHERE) repeat center top; 
}

el código extraño se parece a una cadena base64 como ecoded :

R0lGODlhMwAxAIAAAAAAAP /// yH5BAAAAAAALAAAAAAzADEAAAK8jI + pBr0PowytzotTtbm/DTqQ6C3hGX ElcraA9jIr66ozVpM3nseUvYP1UEHF0FUUHkNJxhLZfEJNvol06tzwrgd LbXsFZYmSMPnHLB + zNJFbq15 + SOf50 + 6rG7lKOjwV1ibGdhHYRVYVJ9Wn k2HWtLdIW MSH9lfyODZoZTb4xdnpxQSEF9oyOWIqp6gaI9pI1Qo7BijbF ZkoaAtEeiiLeKn72xM7vMZofJy8zJys2UxsCT3kO229LH1tXAAAOw ==

ven muy bien: D

Me preguntaba cómo puedo incluir un archivo GIF transparente de 1x1 píxeles como este? ¿Alguien sabe el código de datos para tal imagen?

¿Es una buena idea hacer esto para imágenes pequeñas y muy comunes? ¿Todos los navegadores admiten esto?

Fuente

2011-04-07 Alex

A menos que haya algo de lo que no tenga conocimiento, no hay ninguna razón para usar un espaciador gif como imagen de fondo de CSS. –

Hola Ben. Estoy tratando de hacer que los números de línea aquí no se puedan seleccionar: http://jsfiddle.net/rVwqR/ – Alex

Solo evite la selección de esta manera a través de CSS; no se necesita ninguna imagen de fondo: http://stackoverflow.com/questions/826782/css-rule-to-disable-text-selection-highlighting/4407335#4407335 –

Eso se llama la The data URI scheme

uso del URI datos cocina para convertir casi cualquier cosa a los datos de URI. Enlace: http://software.hixie.ch/utilities/cgi/data/data

Fuente

2011-04-07 21:47:38 Shaz

He intentado convertir una imagen y me aparece una página en blanco – Alex

@Alex: Sí, eso es porque la imagen es transparente, ¿no? De cualquier manera, una vez que conviertas, copia la url en la barra de direcciones. Debería comenzar con 'datos'. – Shaz

ah veo ahora, pero el código generado es enorme: http: // jsfiddle.net/rSzfd /: x – Alex

data:image/gif;base64,R0lGODlhAQABAPAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==

No hay nada malo con hacer esto, se ahorra un HTTP de ida y vuelta. El único inconveniente es que no funciona en las versiones antiguas de IE (Internet Explorer 8, creo, comenzó a apoyarlo)

Fuente

2011-04-07 21:48:30

muestra un fondo blanco. ¿cómo puedo hacerlo transparente? – Alex

Lo siento, lo actualicé. –

gracias, eso funciona. – dsomnus

este es un GIF transparente de un píxel

background-image: url(data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==);

Fuente

2012-05-18 05:21:39 rushkeldon

-Up-hasta la fecha detalles del soporte del navegador para URIs de datos:

http://caniuse.com/#feat=datauri

Fuente

2013-09-26 11:04:03 callum

en función de los navegadores que necesita para apoyar usted podría ser mejor usar rgba(). Sé que esta pregunta es un poco vieja.

body { 
    background-color: rgba(0, 0, 0, .5); 
}

Fuente

2013-09-26 11:13:50

Respuesta

Cuestiones relacionadas