如何重新实例化已声明的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>
答案 0 :(得分:5)
src
不是有效的CSS属性。您需要使用content
...
img.wink {
content: url(data:image/gif;base64,BLAH_BLAH_BLAH);
height: 15px;
width: 15px;
}
有效:Live Demo
答案 1 :(得分:2)
CSS不正确,请data
URL
中的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>
答案 2 :(得分:1)
试试这个:
<html><head>
<style type="text/css">
div.wrapper {
background-image: url(data:image/.gif;base64,R0lGODlhDwAPALMMAP/qAEVFRQAAAP/OAP/JAP6dAP+0AP/+k//9E///x//lAP//6wAAAAAAAAAAAAAAACH5BAEAAAwALAAAAAAPAA8AAARXkEkZap2Y1ZXOGRcWcAgCnEMRTEEnnDCQrtrxxjCoJSZw+y+CKnDo/WAEQ+WAwyUrvWZQGRg0TwKFcFX1xYI6zWCgEJizhBlrTGi31aKAYW4YZlgW2iQCADs=);
width:15px; height:15px;
}
</style>
</head><body>
<h1>Hello</h1>
<div class="wrapper">
<br/>
</body></html>
IE 8,Firefox 2和3,Safari,Mobile Safari(iPhone浏览器)和Google Chrome支持在CSS文件中嵌入二进制图像数据。 IE 6和7没有。
在这里阅读更多内容: http://mark.koli.ch/2009/07/howto-include-binary-image-data-in-cascading-style-sheets-css.html
答案 3 :(得分:0)
如果图像没有为文档带来语义,您只需将base64网址定义为元素的背景而不使用CSS的<img>
否则你可以将base64字符串保存在服务器端变量中,然后把src放在那个需要的地方
如果您不能使用服务器端语言,您仍然可以使用javascript(但最好不要依赖脚本来实现内容可访问性),只需使用domready上的代码片段就像这样:
var img = document.getElementsByTagName('img'),
len = img.length;
while (--len) {
if (-1 < img[len].className.indexOf('wink'))
img[len].src = 'data:image/.gif;base64,...";
}