url(data:image/png;base64,R0)_html/css_WEB-ITnose
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> 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>
<. 🎜>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图片数据
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
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..." />
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...);} In RFC, the complete syntax is defined as follows:
<link rel="stylesheet" type="text/css"href="data:text/css;base64,LyogKioqKiogVGVtcGxhdGUgKioq..." />
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>完整的语法定义
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
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
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.
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
Is HTML easy to learn for beginners?
Apr 07, 2025 am 12:11 AM
HTML is suitable for beginners because it is simple and easy to learn and can quickly see results. 1) The learning curve of HTML is smooth and easy to get started. 2) Just master the basic tags to start creating web pages. 3) High flexibility and can be used in combination with CSS and JavaScript. 4) Rich learning resources and modern tools support the learning process.
The Roles of HTML, CSS, and JavaScript: Core Responsibilities
Apr 08, 2025 pm 07:05 PM
HTML defines the web structure, CSS is responsible for style and layout, and JavaScript gives dynamic interaction. The three perform their duties in web development and jointly build a colorful website.
Understanding HTML, CSS, and JavaScript: A Beginner's Guide
Apr 12, 2025 am 12:02 AM
WebdevelopmentreliesonHTML,CSS,andJavaScript:1)HTMLstructurescontent,2)CSSstylesit,and3)JavaScriptaddsinteractivity,formingthebasisofmodernwebexperiences.
What is an example of a starting tag in HTML?
Apr 06, 2025 am 12:04 AM
AnexampleofastartingtaginHTMLis,whichbeginsaparagraph.StartingtagsareessentialinHTMLastheyinitiateelements,definetheirtypes,andarecrucialforstructuringwebpagesandconstructingtheDOM.
Gitee Pages static website deployment failed: How to troubleshoot and resolve single file 404 errors?
Apr 04, 2025 pm 11:54 PM
GiteePages static website deployment failed: 404 error troubleshooting and resolution when using Gitee...
How to implement adaptive layout of Y-axis position in web annotation?
Apr 04, 2025 pm 11:30 PM
The Y-axis position adaptive algorithm for web annotation function This article will explore how to implement annotation functions similar to Word documents, especially how to deal with the interval between annotations...
HTML, CSS, and JavaScript: Essential Tools for Web Developers
Apr 09, 2025 am 12:12 AM
HTML, CSS and JavaScript are the three pillars of web development. 1. HTML defines the web page structure and uses tags such as, etc. 2. CSS controls the web page style, using selectors and attributes such as color, font-size, etc. 3. JavaScript realizes dynamic effects and interaction, through event monitoring and DOM operations.
How to use CSS3 and JavaScript to achieve the effect of scattering and enlarging the surrounding pictures after clicking?
Apr 05, 2025 am 06:15 AM
To achieve the effect of scattering and enlarging the surrounding images after clicking on the image, many web designs need to achieve an interactive effect: click on a certain image to make the surrounding...
