O que significa os dados: image / png;base64?

tomei um exemplo de um site online e o CSS continha uma URL que apontava para um png e algumas letras aleatórias em ambos os casos podem Qualquer um me dizer como fazer esses códigos ou melhor, o que esses códigos são sobre ...

Aqui está o html 

<center><input class="textbox"type="text" placeholder="E-mail"></center>
Aqui está o css. 
.textbox { 
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyBpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBXaW5kb3dzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjYxRDEzQTBCMzI0MzExRTFBNDYzRkQ4Qzc3RDdBOTg5IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjYxRDEzQTBDMzI0MzExRTFBNDYzRkQ4Qzc3RDdBOTg5Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6NjFEMTNBMDkzMjQzMTFFMUE0NjNGRDhDNzdEN0E5ODkiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NjFEMTNBMEEzMjQzMTFFMUE0NjNGRDhDNzdEN0E5ODkiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz52VTCHAAABFUlEQVR42uxV0Q2DIBBV4z8bdAM26AZ1Ap3AToAT6AR1Ap2gbuAGzKD/TkCP5NmQRpQaSH96yQsJHO/k7t0ZK6WikJZEgS14gHSeZxX6BQuhwerL3pw6ACMIQkuQHsgluDQnM2ugN3rgrK33ha3INdbqBHn1wWFVUU7ghMKxLgt8Oe46yVQ7lrgoD/JdwDf/tg+ueK4mGDfOR5zV8D3VaBwFy6CM1VrsCfjYG81BclrPHVZp7HcoLN8LshdgNMg50pDh7In+uSCIsKUpnqZJWfQ8EB4gOlLRnXBzVVFvpIA5yJTBV241aeLSLI622aRmiho8k3uYRcM6LlLksEWzMA/DjqP4+oNLW5G9Wfz/J/88wEuAAQA9yExzBAEQqwAAAABJRU5ErkJggg==) no-repeat 245px 0px #FFF; 
height: 20px; 
width: 275px; 
    border: 1px solid #848484; 
    color: black;

}

Eu quero saber o que essas letras e números significam I. E. () ou melhor, o que é e como posso converter meu próprio png para isso. Alguma ideia?

 3
htmlcss
Author: Mr. Alien, 2013-11-20
Source

3 answers

Isso não passa de um Base64 imagem codificada.

Gostaria de avisá - lo que Base64 tem limitações de comprimento

Embora o Mozilla suporte URIs de dados de tamanho essencialmente ilimitado, os navegadores não são obrigados a suportar qualquer comprimento máximo particular de dado. Por exemplo, o navegador Opera 11 limita os URIs de dados a cerca de 65000 caracteres.

  1. problemas comuns-MDN
  2. navegador Apoio
  3. Conversor Online
 3
Author: Mr. Alien, 2013-11-20 07:46:10
É um ... URI dos dados.

Enquanto os URIs HTTP se referem arecursos externos , os URIs de Dados incluem {[13] } os recursos em linha.

Por omissão, os URIs de dados usam US-ASCII (+%- encoding); poderá usar a codificação base64 com ;base64..

Exemplos

Este URI de dados é um documento de texto em UTF-8, contendo apenas a palavra "foobar": 

data:text/plain;charset=utf-8,foobar

Este é um documento HTML5: 

data:text/html;charset=utf-8,%3C%21DOCTYPE%20html%3E%0D%0A%3Chtml%3E%0D%0A%3Chead%3E%3Ctitle%3E%3A-%29%3C%2Ftitle%3E%3C%2Fhead%3E%0D%0A%3Cbody%3E%3A-%29%3C%2Fbody%3E

Codificado com base64, esse HTML o documento pareceria com: 

data:text/html;charset=utf-8;base64,PCFET0NUWVBFIGh0bWw+DQo8aHRtbD4NCjxoZWFkPjx0aXRsZT46LSk8L3RpdGxlPjwvaGVhZD4NCjxib2R5PjotKTwvYm9keT4=

Basta introduzir estes URIs no campo de endereços do seu navegador, como faria com o HTTP URIs.

 1
Author: unor, 2013-11-20 11:04:04
É uma codificação de Base 64 de um ficheiro de Imagem PNG.
 0
Author: Barmar, 2013-11-20 06:02:23