2006年07月09日

HTMLやCSSファイルに画像を埋め込む

以下のHTMLの「■」の部分を、適当なPNG画像をBASE64でエンコードしたテキストに置き換え、ファイルに保存しFirefoxで開いてみてください。

<html>
<body style="background-image:url('data:image/png;base64,■')">
</body>
</html>

すると不思議なことに、外部の画像を参照しているわけではないのに、先ほどのPNG画像が背景として表示されます。以前Sage用のスタイルシートを作った時に、

-moz-border-radius

なんて便利なものを知って驚いたと書きましたが、最近知ったこの技にはもっとびっくり! 現在はIEが未対応なため、ほんとにSageのスタイルシートぐらいしか使い方が思いつきませんが、これがあればCSSファイルひとつで、いくらでも凝ったことができそうです。

2006年07月09日 20:32