ホームページ > 記事 > ウェブフロントエンド > url(data:image/png;base64,R0)_html/css_WEB-ITnose
url(data:image/png;base64,R0)_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:42:563472ブラウズ
url(data:image/png;base64,R0**)
いわゆる「データ」タイプの URL 形式は、RFC2397 で提案されており、その目的は、いくつかの「小さな」データを Web ページに直接埋め込むことです。外部ファイルからロードするのではなく、たとえば、タグ img の場合、画像が 1 ドットほどの非常に小さい場合でも、ブラウザが URL 形式のデータ型を実装している場合は、gif ファイルなどの別の外部画像ファイルから読み取る必要があります。このファイルはページ ファイル内から直接読み取ることができます。
データ型 URL 形式は 1998 年に提案されました。現在、Firefox、Opera、Safari、Konqueror などのブラウザーはすでにこれをサポートしていますが、IE はバージョン 7.0 までサポートしていません。IE がサポートしていないものが多すぎます。まあ、これも違いはありません。 :(
小さな例です
次の HTML コードは、Firefox などのデータ型 Url をサポートするブラウザーで実行できます。実行後、青色のグラデーションの背景を持つタイトルが表示されます。
<!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> このグラデーションの青色の背景実際には、色は水平方向の繰り返し (repeat-x) によって 1x28 の小さな画像を使用して形成されます。この画像は非常に小さいですが、104 バイトなので、データ形式で HTML または CSS ファイル
Url に直接埋め込むのに適しています。最も直接的な利点は、Web ページのアドレスがあるため、これらの URL によって新しいネットワーク訪問が発生することですが、これが Web ページのコンテンツになるため、新しいネットワーク訪問がなくなることです。サーバーの負荷を軽減します。もちろん、現在の Web ページのサイズも増加します。したがって、データ型の URL を直接入力することもできます。ブラウザのアドレスバーに
data:text/html,<html><body><p><b>Hello, world!</b></p></body></html>
ブラウザに上記の URL を入力すると、太字の「Hello, world!」が表示されます。つまり、data: の後のデータは Web ページのコンテンツとして使用されません。 Web ページのアドレス
簡単に言えば、データ型の 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图片数据
URL はテキストベースのプロトコルであるため、gif/png/jpeg などのバイナリは Base64 でエンコードする必要があります。つまり、base64 の導入後は、あらゆるデータ形式をサポートできます。以下は、ブラウザーに Mozilla アイコンを表示する PNG 画像の例です。
データ形式の URL のさまざまなアプリケーションの例です。
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAHWSURBVHjaYvz//z8DJQAggJiQOe/fv2fv7Oz8rays/N+VkfG/iYnJfyD/1+rVq7ffu3dPFpsBAAHEAHIBCJ85c8bN2Nj4vwsDw/8zQLwKiO8CcRoQu0DxqlWrdsHUwzBAAIGJmTNnPgYa9j8UqhFElwPxf2MIDeIrKSn9FwSJoRkAEEAM0DD4DzMAyPi/G+QKY4hh5WAXGf8PDQ0FGwJ22d27CjADAAIIrLmjo+MXA9R2kAHvGBA2wwx6B8W7od6CeQcggKCmCEL8bgwxYCbUIGTDVkHDBia+CuotgACCueD3TDQN75D4xmAvCoK9ARMHBzAw0AECiBHkAlC0Mdy7x9ABNA3obAZXIAa6iKEcGlMVQHwWyjYuL2d4v2cPg8vZswx7gHyAAAK7AOif7SAbOqCmn4Ha3AHFsIDtgPq/vLz8P4MSkJ2W9h8ggBjevXvHDo4FQUQg/kdypqCg4H8lUIACnQ/SOBMYI8bAsAJFPcj1AAEEjwVQqLpAbXmH5BJjqI0gi9DTAAgDBBCcAVLkgmQ7yKCZxpCQxqUZhAECCJ4XgMl493ug21ZD+aDAXH0WLM4A9MZPXJkJIIAwTAR5pQMalaCABQUULttBGCCAGCnNzgABBgAMJ5THwGvJLAAAAABJRU5ErkJgggなど、Html の Img オブジェクトで使用できます
<img src="data:image/x-icon;base64,AAABAAEAEBAAAAAAAABoBQAAF..." />など、Css のbackground-image 属性で使用できます
div.image {width:100px;height:100px;background-image:url(data:image/x-icon;base64,AAABAAEAEBAAAAAAAABoBQAAF...);} など、Html の CSS リンクで使用できます 使用できますHTML の Javascript リンク (例:
<link rel="stylesheet" type="text/css"href="data:text/css;base64,LyogKioqKiogVGVtcGxhdGUgKioq..." />)
RFC では、完全な構文は次のように定義されています。
<script type="text/javascript"href="data:text/javascript;base64,dmFyIHNjT2JqMSA9IG5ldyBzY3Jv..."></script>完整的语法定义
urlchar は、「=」など、エスケープする必要がある文字を指します。 「%3D」としてエスケープできますが、少なくとも Firefox ではエスケープなしで実行できます。最も一般的なのは、多言語で使用される charset です。例えば以下の例では「Hello, Chinese.」と表示されますが、charset部分を削除すると文字化けしてしまいます。
Firefox には、データ型 Url のテスト ページがあり、さまざまな形式のデータ型 Url のテスト URL とテスト結果の説明がリストされます。
base64エンコードと内容の秘密
バイナリデータをBase64に変換することは難しいことではなく、例えばTotal Commanderにはそのような機能があります。オンライン リソースもいくつかあります。http://www.greywyvern.com/code/php/binary2base64http://www.kawa.net/works/js/data-scheme/base64-e.html
オンライン リソースもあります変換 Base64の「=」を%3Dに変換します。これは、URLの「=」と同じです。変換しなくても問題ありません。