url(data:image/png;base64,R0)_html/css_WEB-ITnose-HTML Tutorial-php.cn

url(data:image/png;base64,R0)_html/css_WEB-ITnose

WBOY

Release： 2016-06-24 11:42:56

Original

3486 people have browsed it

url(data:image/png;base64,R0**)

The so-called "data" type Url format was proposed in RFC2397 for the purpose of some "small ” data can be embedded directly in the web page instead of being loaded from an external file. For example, for the tag img, even if the image is very, very small, as small as only one dot, it must be read from another external image file such as a gif file. If the browser implements the data type Url format, this file You can read directly from inside the page file.

The data type Url format was proposed as early as 1998. Today, browsers such as Firefox, Opera, Safari and Konqueror already support it, but IE does not support it until version 7.0. IE does not support it. There are too many things, and this one is not bad. :(

Small example

The following HTML code can be run in a browser that supports data type Url, such as Firefox. After running, you will see a title with a blue gradient background.

 <!DOCTYPEhtml PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml" ><head><styletype="text/css">；.title { background-image:url(data:image/gif;base64,R0lGODlhAQAcALMAAMXh96HR97XZ98Hf98Xg97DX97nb98Lf97vc98Tg973d96rU97ba97%2Fe96XS9wAAACH5BAAAAAAALAAAAAABABwAAAQVMLhVBDNItXESAURyDI2CGIxQLE4EADs%3D);background-repeat:repeat-x;height:28px;line-height: 28px;text-align:center;}</style></head><body><divclass="title">Hello, world!</div></body></html>

Copy after login

The blue background of this gradient is actually formed by horizontal repetition (repeat-x) of a small 1x28 image. This image is very small, only 104 bytes, and is directly embedded in html. Or css file is still very suitable.

The most direct benefit of Url in data format is that these Url would originally cause a new network visit, because there is the address of a web page, and now there will be no new network. Accessed, because this is the content of the web page. Doing so will reduce the load on the server, and of course it will also increase the size of the current web page, so it is particularly beneficial for "small" data type Url. Since it is a URL, you can of course enter it directly in the address bar of the browser.

Enter the above URL in the browser and you will get a bold "Hello, world!". In other words, the data after data: is used directly as the content of the web page, rather than the address of the web page. Simply put, the data type Url has the following forms:

data:text/html,<html><body><p><b>Hello, world!</b></p></body></html>

Copy after login

<. 🎜>Because Url is a text-based protocol, binaries such as gif/png/jpeg need to be encoded with base64. In other words, after the introduction of base64, any form of data format can be supported. The following is a png image. For example, a Mozilla icon will be displayed in the browser.

Various application examples of data format Url

data:,<文本数据>data:text/plain,<文本数据>data:text/html,<HTML代码>data:text/html;base64,<base64编码的HTML代码>data:text/css,<CSS代码>data:text/css;base64,<base64编码的CSS代码>data:text/javascript,<Javascript代码>data:text/javascript;base64,<base64编码的Javascript代码>data:image/gif;base64,base64编码的gif图片数据data:image/png;base64,base64编码的png图片数据data:image/jpeg;base64,base64编码的jpeg图片数据data:image/x-icon;base64,base64编码的icon图片数据

Copy after login

can be used in the Img object of Html, such as

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAHWSURBVHjaYvz//z8DJQAggJiQOe/fv2fv7Oz8rays/N+VkfG/iYnJfyD/1+rVq7ffu3dPFpsBAAHEAHIBCJ85c8bN2Nj4vwsDw/8zQLwKiO8CcRoQu0DxqlWrdsHUwzBAAIGJmTNnPgYa9j8UqhFElwPxf2MIDeIrKSn9FwSJoRkAEEAM0DD4DzMAyPi/G+QKY4hh5WAXGf8PDQ0FGwJ22d27CjADAAIIrLmjo+MXA9R2kAHvGBA2wwx6B8W7od6CeQcggKCmCEL8bgwxYCbUIGTDVkHDBia+CuotgACCueD3TDQN75D4xmAvCoK9ARMHBzAw0AECiBHkAlC0Mdy7x9ABNA3obAZXIAa6iKEcGlMVQHwWyjYuL2d4v2cPg8vZswx7gHyAAAK7AOif7SAbOqCmn4Ha3AHFsIDtgPq/vLz8P4MSkJ2W9h8ggBjevXvHDo4FQUQg/kdypqCg4H8lUIACnQ/SOBMYI8bAsAJFPcj1AAEEjwVQqLpAbXmH5BJjqI0gi9DTAAgDBBCcAVLkgmQ7yKCZxpCQxqUZhAECCJ4XgMl493ug21ZD+aDAXH0WLM4A9MZPXJkJIIAwTAR5pQMalaCABQUULttBGCCAGCnNzgABBgAMJ5THwGvJLAAAAABJRU5ErkJggg

Copy after login

can be used in the background-image attribute of Css, such as

can be used in the Css link of Html, such as

<img src="data:image/x-icon;base64,AAABAAEAEBAAAAAAAABoBQAAF..." />

Copy after login

can be used in the Javascript link of Html Used everywhere, such as

div.image {width:100px;height:100px;background-image:url(data:image/x-icon;base64,AAABAAEAEBAAAAAAAABoBQAAF...);}

Copy after login

In RFC, the complete syntax is defined as follows:

<link rel="stylesheet" type="text/css"href="data:text/css;base64,LyogKioqKiogVGVtcGxhdGUgKioq..." />

Copy after login

urlchar refers to the characters allowed in general URLs. Some characters need to be escaped, such as "=" needs to be escaped as "=", but I have tested that, at least in Firefox, it is possible without escaping.

<script type="text/javascript"href="data:text/javascript;base64,dmFyIHNjT2JqMSA9IG5ldyBzY3Jv..."></script>完整的语法定义

Copy after login

Parameter can extend mediatype attributes. The most common one is charset. Define the encoding format, which is needed in multi-language situations. For example,

dataurl := "data:" [ mediatype ] [ ";base64" ] "," datamediatype := [ type "/" subtype ] *( ";" parameter )data := *urlcharparameter := attribute "=" value

Copy after login

This example will display "Hello, Chinese!" ". If you remove the charset part, garbled characters will be displayed because I use UTF-8 encoding.

Firefox has a test page for data type Url, which lists data type Url in various formats. Test Url, and description of test results.

data:text/plain;charset=UTF-8;base64,5L2g5aW977yM5Lit5paH77yB

Copy after login

Secrets of base64 encoding and content

Converting binary data to Base64 is not difficult. For example, Total Commander has such a function,

http://www.greywyvern.com/code/php/binary2base64http://www.kawa.net/works/js/data-scheme/base64-e.html

Some online conversions Convert the "=" in base64 to =, which is the same as "=" in Url. There is no problem if you don't convert it.