css - HTML内で画像をエンコードする方法は?

Question

HTML 内で背景画像をエンコードするにはどうすればよいですか? 例：

background-image: url(data:image/gif;base64,XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX);

画像ファイルがある場合、その内容をエンコードして文字列に変換するにはどうすればよいですか? これは、これらのカスタムフォントサービスが行うことと同じですか?

score 4 · Accepted Answer

この Web サイトで画像を変換できます。

次のように使用します。

(X)HTML画像埋め込み例

<img alt="Embedded Image" width="158" height="158" 
  src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJ4A..." />

CSS 画像埋め込みの例

div.image {
  width:158px;
  height:158px;
  background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJ4A...);
}

XML 画像埋め込みの例

<image>
  <title>An Image</title>
  <link>http://www.your.domain</link>
  <url>data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJ4A...</url>
</image>

他のものを埋め込む！

データ URI は、画像だけでなく、あらゆるタイプのデータを格納できる可能性があります。サイズについては、次の例を試してください: (X)HTML CSS 埋め込みの例

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

(X)HTML Javascript の埋め込み例

<script type="text/javascript"
  src="data:text/javascript;base64,dmFyIHNjT2JqMSA9IG5ldyBzY3Jv..."></script>

1 に答える 1