mehrere Instanzen derselben Daten url Bild

Wie Sie wieder instanziiert eine bereits Base64 Daten url Bild erklärt, ohne den Base64-Code auf der gleichen Seite wieder einsetzen (vorzugsweise mit CSS)mehrere Instanzen derselben Daten url Bild

Ich habe versucht:

<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>

Quelle

2010-10-29 GlassGhost

das CSS nicht korrekt ist, machen den data die URL im background-image, dann können Sie es nach Klasse verweisen.

<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>

Quelle

2010-10-29 19:19:17

Warum s 'div' benutzen? –

Sie können ein beliebiges Element verwenden, aber die Verwendung eines Hintergrunds für ein Image-Element ist nicht das, was er benötigt. Um dieses einzelne Bild wiederzuverwenden, muss es über CSS erfolgen. –

@Dustin Nein, Sie fangen nicht meine Drift. Siehe meine Antwort bitte. –

wenn Bilder auf das Dokument nicht semantische bringen könnten Sie einfach die base64 url als Hintergrund ein Element definieren, ohne <img> von CSS

Andernfalls könnten Sie das Base64-String in einem server- speichern side variabile, dann setze den src, der diese Variable platziert, wo immer sie benötigt

Wenn du keine serverseitige Sprache verwenden kannst, könntest du immer noch JavaScript verwenden (aber es ist besser, keine Skripte für die Zugänglichkeit von Inhalten zu verwenden), benutze einfach ein Snippet domready wie folgt:

var img = document.getElementsByTagName('img'), 
    len = img.length; 
while (--len) { 
    if (-1 < img[len].className.indexOf('wink')) 
     img[len].src = 'data:image/.gif;base64,..."; 
}

Quelle

2010-10-29 19:19:44

versuchen Sie dies:

<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 und 3, Safari, Mobile Safari (iPhone-Browser) und Google Chrome Unterstützung eingebettete binäre Bilddaten in CSS-Dateien. IE 6 und 7 nicht.

lesen Sie hier mehr: http://mark.koli.ch/2009/07/howto-include-binary-image-data-in-cascading-style-sheets-css.html

Quelle

2010-10-29 19:25:46

src keine gültige CSS-Eigenschaft ist. Sie müssen content für diesen Einsatz ...

img.wink { 
    content: url(data:image/gif;base64,BLAH_BLAH_BLAH); 
    height: 15px; 
    width: 15px; 
}

Es funktioniert: Live Demo

Quelle

2010-10-29 19:31:00

Ich glaube dir, dass es funktioniert, aber in welchem Browser (ich bin verrückt)? Ich benutze Firefox in Ubuntu Lynx. – GlassGhost

Das funktioniert nicht in FF 3.6 oder IE 7/8/9. –

@GlassGhost Ich benutze Chrome –

mehrere Instanzen derselben Daten url Bild

Antwort

Verwandte Themen