più istanze stessi dati URL dell'immagine

Come si ri-istanziare un'immagine dati URL Base64 già dichiarato senza dover re-inserire il codice base64 sulla stessa pagina (preferibilmente con css)più istanze stessi dati URL dell'immagine

ho provato:

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

fonte

2010-10-29 GlassGhost

che i CSS non è corretta, rendono il data il URL nel background-image, allora si può fare riferimento a essa per classe.

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

fonte

2010-10-29 19:19:17

Perché usare 'div' s? –

Puoi usare qualsiasi elemento, ma usare uno sfondo su un elemento 'image' non è ciò di cui ha bisogno. Per riutilizzare quell'unica immagine, è necessario farlo attraverso i CSS. –

@Dustin No, non stai prendendo in considerazione. Vedi la mia risposta per favore. –

se le immagini non portano semantica al documento che si può solo definire l'URL Base64 come sfondo di un elemento senza utilizzare <img> da CSS

In caso contrario si potrebbe risparmiare la stringa base64 in un server- variabile lato, poi mettere lo src ponendo la variabile ovunque ha bisogno

se non è possibile usare un linguaggio lato server si potrebbe ancora utilizzare javascript (ma è meglio non fare affidamento su script per il contenuto accessibilità), basta usare un frammento su 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,..."; 
}

fonte

2010-10-29 19:19:44

provare questo: incorporati dati immagine binari

<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 e 3, Safari, Safari Mobile (i browser di iPhone), e Google Chrome supporto a file CSS. IE 6 e 7 NON.

fonte

2010-10-29 19:25:46

src non è una proprietà CSS valido. È necessario utilizzare content per questo ...

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

Funziona: Live Demo

fonte

2010-10-29 19:31:00

Ti credo che funzioni, ma in quale browser (io sono pazzo)? Sto usando Firefox in Ubuntu Lynx. – GlassGhost

Non funziona in FF 3.6 o IE 7/8/9. –

@GlassGhost Sto usando Chrome –

più istanze stessi dati URL dell'immagine

risposta

Problemi correlati