什么数据:图像/ png;base64的意思吗?

I took an example from an online website and the CSS contained a URL pointing to a png and some random letters in both cases can any one tell me how to make such codes or rather what those codes are about ...

我在一个在线网站上举了一个例子，CSS包含一个指向png的URL，在这两种情况下，任何一个字母都能告诉我怎么做这些代码，或者这些代码是关于什么的。

here is the html

这是html

<center><input class="textbox"type="text" placeholder="E-mail"></center> 

here is the css

这是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;

}

}

I want to know what those letters and numbers mean i.e () or rather what it is and how can I convert my own png to that . Any ideas?

我想知道这些字母和数字是什么意思。e()或者说它是什么，我怎么能把自己的png转换成这个。什么好主意吗?

3 个解决方案

#1

That is nothing but a Base64 encoded image.

这只是一个Base64编码的图像。

---

Would like to warn you that Base64 has length limitations

要警告你，Base64有长度限制吗?

Although Mozilla supports data URIs of essentially unlimited length, browsers are not required to support any particular maximum length of data. For example, the Opera 11 browser limits data URIs to around 65000 characters.

虽然Mozilla支持的数据uri基本上是无限长的，但是浏览器不需要支持任何特定的最大长度的数据。例如，Opera 11浏览器将数据uri限制在65000个字符左右。

1. Common problems - MDN
2. 常见问题——MDN
3. Browser Support
4. 浏览器支持
5. Online Converter
6. 在线转换器

#2

It’s a data URI.

这是一个数据URI。

While HTTP URIs refer to external resources, data URIs include the resources in-line.

当HTTP uri引用外部资源时，数据uri包括在线资源。

By default data URIs use US-ASCII (+ percent-encoding); you can use base64 encoding with ;base64..

默认数据uri使用US-ASCII(+百分比编码);您可以使用base64编码;base64..

Examples

This data URI is a text document in UTF-8, containing only the word "foobar":

此数据URI是UTF-8中的文本文档，只包含“foobar”一词:

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

This one is a HTML5 document:

这是一个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

Encoded with base64, that HTML document would look like:

用base64编码，HTML文档看起来是这样的:

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

Simply enter these URIs into the address field of your browser, like you would do with HTTP URIs.

只需将这些uri输入浏览器的地址字段，就像使用HTTP uri一样。

#3

That's a base64 encoding of a PNG image file.

这是一个PNG图像文件的base64编码。