plusieurs instances mêmes données URL de l'image

Comment vous ré-instancier une image url de données base64 déjà déclaré sans avoir à ré-insérer le code base64 sur la même page (de préférence avec css)plusieurs instances mêmes données URL de l'image

j'ai essayé:

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

Source

2010-10-29 GlassGhost

ce CSS est pas correct, faire le data le URL dans le background-image, vous pouvez référencer par 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>

Source

2010-10-29 19:19:17

Pourquoi utiliser 's div'? –

Vous pouvez utiliser n'importe quel élément, mais l'utilisation d'un arrière-plan sur un élément 'image' n'est pas ce dont il a besoin. Pour réutiliser cette seule image, elle doit être effectuée via CSS. –

@Dustin Non, vous n'attrapez pas ma dérive. Voyez ma réponse s'il vous plait. –

si les images ne pas apporter sémantique au document que vous pouvez simplement définir l'url base64 comme arrière-plan d'un élément sans utiliser <img> par CSS

Sinon, vous pourriez sauver la chaîne base64 dans un server- Si vous ne pouvez pas utiliser un langage côté serveur, vous pouvez toujours utiliser javascript (mais il est préférable de ne pas compter sur les scripts pour l'accessibilité du contenu), il suffit d'utiliser un extrait sur le côté variabile, puis placez cette variable là où elle le faut. domready comme ça:

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

Source

2010-10-29 19:19:44

essayez ceci:

<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 et 3, Safari, Safari Mobile (Navigateurs iPhone) et Google Chrome support de données d'images binaires incorporées dans les fichiers CSS. IE 6 et 7 ne fait pas.

lire la suite ici: http://mark.koli.ch/2009/07/howto-include-binary-image-data-in-cascading-style-sheets-css.html

Source

2010-10-29 19:25:46

src n'est pas une propriété CSS valide. Vous devez utiliser content pour cette ...

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

Il fonctionne: Live Demo

Source

2010-10-29 19:31:00

Je vous crois que cela fonctionne, mais dans quel navigateur (je suis fou)? J'utilise Firefox dans Ubuntu Lynx. – GlassGhost

Cela ne fonctionne pas dans FF 3.6 ou IE 7/8/9. –

@GlassGhost J'utilise Chrome –

plusieurs instances mêmes données URL de l'image

Répondre

Questions connexes