multiple instances same data url image
How do you re-instantiate an already declared base64 data url image without having to re-insert the base64 code on the same page?(preferably with css)
I tried:
<html><head>
<style type="text/css">
img.wink { width:15px; height:15px;
src:"data:image/.gif;base64,R0lGOD开发者_如何转开发lhDwAPALMMAP/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 is not a valid CSS property. You need to use content for this...
img.wink {
content: url(data:image/gif;base64,BLAH_BLAH_BLAH);
height: 15px;
width: 15px;
}
It works: Live Demo
That CSS is not correct, make the data the URL in the background-image, then you can reference it by class.
<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>
try this:
<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 and 3, Safari, Mobile Safari (iPhone browsers), and Google Chrome support embedded binary image data in CSS files. IE 6 and 7 does NOT.
read more here: http://mark.koli.ch/2009/07/howto-include-binary-image-data-in-cascading-style-sheets-css.html
if images don't bring semantic to the document you could just define the base64 url as a background of an element without using <img> by CSS
Otherwise you could save the base64 string in a server-side variabile, then put the src placing that variable wherever it needs
if you cannot use a server-side language you could still use javascript (but it's better no to rely on scripts for content accessibility), just use a snippet on domready like so:
var img = document.getElementsByTagName('img'),
len = img.length;
while (--len) {
if (-1 < img[len].className.indexOf('wink'))
img[len].src = 'data:image/.gif;base64,...";
}
加载中,请稍侯......
精彩评论