Gla*_*ost 10 html css base64 data-url
如何重新实例化已经声明的base64数据网址图像而不必在同一页面上重新插入base64代码？(最好用css)
我试过了:
<html><head>
<style type="text/css">
img.wink { width:15px; height:15px;
src:"data:image/.gif;base64,R0lGODlhDwAPALMMAP/qAEVFRQAAAP/OAP/JAP6dAP+0AP/+k//9E///x//lAP//6wAAAAAAAAAAAAAAACH5BAEAAAwALAAAAAAPAA8AAARXkEkZap2Y1ZXOGRcWcAgCnEMRTEEnnDCQrtrxxjCoJSZw+y+CKnDo/WAEQ+WAwyUrvWZQGRg0TwKFcFX1xYI6zWCgEJizhBlrTGi31aKAYW4YZlgW2iQCADs=";
}
</style>
</head><body>
<h1>Hello</h1>
<img class="wink"/>, and just to test my sanity <img width="15px" height="15px" src="data:image/.gif;base64,R0lGODlhDwAPALMMAP/qAEVFRQAAAP/OAP/JAP6dAP+0AP/+k//9E///x//lAP//6wAAAAAAAAAAAAAAACH5BAEAAAwALAAAAAAPAA8AAARXkEkZap2Y1ZXOGRcWcAgCnEMRTEEnnDCQrtrxxjCoJSZw+y+CKnDo/WAEQ+WAwyUrvWZQGRg0TwKFcFX1xYI6zWCgEJizhBlrTGi31aKAYW4YZlgW2iQCADs=" alt=";)"/>.
</body></html>
src不是有效的CSS属性.你需要使用content这个......
img.wink {
content: url(data:image/gif;base64,BLAH_BLAH_BLAH);
height: 15px;
width: 15px;
}
它的工作原理:现场演示
那CSS不正确，把datatheURL放在里面background-image，然后就可以通过类引用它了。
<html>
<head>
<style type="text/css">
div.wink
{
width:15px;
height:15px;
background-image: url('data:image/.gif;base64,R0lGODlhDwAPALMMAP/qAEVFRQAAAP/OAP/JAP6dAP+0AP/+k//9E///x//lAP//6wAAAAAAAAAAAAAAACH5BAEAAAwALAAAAAAPAA8AAARXkEkZap2Y1ZXOGRcWcAgCnEMRTEEnnDCQrtrxxjCoJSZw+y+CKnDo/WAEQ+WAwyUrvWZQGRg0TwKFcFX1xYI6zWCgEJizhBlrTGi31aKAYW4YZlgW2iQCADs=');
}
</style>
</head>
<body>
<h1>Hello</h1>
<div class="wink"></div>
<br/>
and just to test my sanity
<div class="wink"></div>.
</body>
</html>