Background Base64

[SpidermMan3]

Boa Noite pessoal

Vejo muitas paginas em que o seu ficheiro de estilos tem backgroud assim (mas é so em alguns "backgrounds"):

 background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iI2ViZWJlYiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iI2RjZGNkYyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);

Porque motivo?

Outra coisa, qual a diferença em utilizar position: absolute e relative?

Obrigado desde já.

[nelsonr]

Boas,

Vejo muitas paginas em que o seu ficheiro de estilos tem backgroud assim (mas é so em alguns "backgrounds"):

isso é para não ter um link para um ficheiro da imagem, fica a imagem logo ai metida.

Outra coisa, qual a diferença em utilizar position: absolute e relative?

http://www.w3schools.com/css/css_positioning.asp

[Virneto]

Outra coisa, qual a diferença em utilizar position: absolute e relative?

Relativamente ao CSS positioning isto tem-me sido util:

http://www.barelyfitz.com/screencast/html-training/css/positioning/

Edited September 23, 2013 at 09:21 AM by Virneto

[SpidermMan3]

Thanks. Em relação ao background, se quiser fazer isso como o posso fazer?

[I-NOZex]

http://www.base64-image.de/

http://webcodertools.com/imagetobase64converter

[SpidermMan3]

http://www.base64-image.de/

http://webcodertools.com/imagetobase64converter

Thanks.

Mas há uma coisa que não percebo, então a imagem não fica alojada no "nosso" servidor? Eu faço upload da imagem e recebo codificada, mas não está guardada no servidor, a qualquer momento pode ser apagada..

[nelsonr]

Basicamente isso lê a imagem e retorna-te o código base64 da imagem.

O código é a propria imagem, não é um link para uma imagem alojada em lado nenhum.

[SpidermMan3]

Basicamente isso lê a imagem e retorna-te o código base64 da imagem.

O código é a propria imagem, não é um link para uma imagem alojada em lado nenhum.

Percebi então. 🙂

Obrigado!

[I-NOZex]

uma imagem, como a maioria dos tipos de ficheiros, é um ficheiro binario

mas em vez de utilizar a imagem em binario, usas-se codificado em base64 😉

atençao, isto aumenta o tamanho do css! por outro lado reduz os requests que o mesmo possa fazer, mas ainda assim acho mais seguro a pratica de sprites