什么是数据:image/png;base64平均值

Question

我从一个在线网站上举了一个例子，CSS包含一个指向png的URL和一些随机字母。在这两种情况下，任何人都可以告诉我如何制作这样的代码，或者更确切地说，这些代码是关于什么的。。。

这是html

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

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

}

我想知道这些字母和数字是什么意思，即（），或者更确切地说是什么，以及如何将我自己的png转换为它。有什么想法吗？

Answer 1

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

---

想警告你Base64有长度限制

尽管Mozilla支持长度基本上不受限制的数据URI，浏览器不需要支持任何特定的最大长度数据例如，Opera 11浏览器将数据URI限制为大约65000个字符。

1. 常见问题-MDN
2. 浏览器支持
3. 在线转换器

Answer 2

这是一个数据URI。

虽然HTTP URI指的是外部资源，但数据URI包含内联资源。

默认情况下，数据URI使用US-ASCII（+百分比编码）；您可以将base64编码与;base64.一起使用。

示例

这个数据URI是UTF-8的文本文档，只包含单词"foobar"：

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

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

用base64编码的HTML文档看起来像：

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

只需在浏览器的地址字段中输入这些URI，就像处理HTTPURI一样。

Answer 3

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