Hisashi Morita (![[info]](http://l-stat.livejournal.com/img/userinfo.gif){kind=small} hisashim) wrote,@ 2006-01-08 22:10:00 |
|
[Tip][CSS][HTML] Embedding images in CSS using "data" URL scheme
Embedding images in CSS using "data" URL scheme
----------------------------------------
URLスキームのひとつであるdataを使うと、URLにデータを含められる。これを
例えばこんな感じ。ABCDE...の部分がデータ。
例えばh1要素の直前に何か画像を置きたければ、次のように指定すればよい。
base64,の後にあるのは、PNG画像をbase64でテキストにエンコードした
画像をbase64エンコードする方法は何でもいいけれど、RubyとNKFの例をメ
Embedding images in CSS using "data" URL scheme
----------------------------------------
URLスキームのひとつであるdataを使うと、URLにデータを含められる。これを
The "data" URL scheme
http://www.ietf.org/rfc/rfc2397.txt
(via http://znz.s1.xrea.com/t/?date=20060108#p01)
例えばこんな感じ。ABCDE...の部分がデータ。
data:image/png;base64,ABCDE...
例えばh1要素の直前に何か画像を置きたければ、次のように指定すればよい。
h1:before {
content: url("data:image/png;base64,GyRCMTEbKEJORwoaCgAAAA1JSERS
AAAAAQAAAAEQAAAAAGobJEJ7KBsoQhYAAAAJcEhZcwAAAEgAAA
BIAEYbJEIlThsoQms+AAAAC0lEQVQIGyRCJWkbKEJjGyRCGyhC
HwADAAEbJEIbKEJdchskQhsoQgAAAElFTkQbJEIlZxsoQkJg");
}
base64,の後にあるのは、PNG画像をbase64でテキストにエンコードした
画像をbase64エンコードする方法は何でもいいけれど、RubyとNKFの例をメ
% ruby -e '[ARGF.read].pack("m").display' <foo.png
% nkf -MB <foo.png
