HTMLやCSSでBase64文字列を実装する方法
Leibniz Li
@leibnizliHTMLファイルとCSSファイルでは、どちらもBase64データ文字列を利用できます。以下のコードにある「YOUR_BASE64_STRING」を自分のBase64文字列に置き換えてください。
HTMLでBase64を使う
- JPEG：
<img src="data:image/jpeg;base64,YOUR_BASE64_STRING"/> - PNG：
<img src="data:image/png;base64,YOUR_BASE64_STRING"/> - GIF：
<img src="data:image/gif;base64,YOUR_BASE64_STRING"/> - SVG：
<img src="data:image/svg+xml;base64,YOUR_BASE64_STRING"/> - JavaScript：
<script type="text/javascript" src="data:text/javascript;base64,YOUR_BASE64_STRING"></script> - CSS：
<link rel="stylesheet" type="text/css" href="data:text/css;base64,YOUR_BASE64_STRING"/>
CSSでBase64を使う
- 画像：
.yourclass {background: url('data:image/jpeg;base64,YOUR_BASE64_STRING');} - フォント：
@font-face { font-family: 'yourfontname'; src: local("yourfontname"), url(data:font/opentype;charset=utf-8;base64,YOUR_BASE64_STRING), url(data:application/font-woff;charset=utf-8;base64,YOUR_BASE64_STRING) format(woff), url(data:application/font-woff2;charset=utf-8;base64,YOUR_BASE64_STRING) format(woff2), url(data:application/font-ttf;charset=utf-8;base64,YOUR_BASE64_STRING) format('truetype'); }