Несколько экземпляров одного и того же URL-адреса данных

Question

Несколько экземпляров одного и того же URL-адреса данных

Как создать экземпляр уже объявленного образа URL-адреса 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>

13

html css base64 data-url

Источник

user144020 29 окт '10 в 19:12

4 ответа

Другие вопросы по тегам html css base64 data-url

user54420 29 окт '10 в 19:31 2010-10-29 19:31 · Answer 1 · 2010-10-29 19:31

src не является допустимым свойством CSS. Вам нужно использовать content за это...

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

Работает: Live Demo

6

Источник

user54420 29 окт '10 в 19:31

user107862 29 окт '10 в 19:19 2010-10-29 19:19 · Answer 2 · 2010-10-29 19:19

Что 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>

user1289525 29 окт '10 в 19:25 2010-10-29 19:25 · Answer 3 · 2010-10-29 19:25

Попробуй это:

<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

29 окт '10 в 19:19 2010-10-29 19:19 · Answer 4 · 2010-10-29 19:19

Если изображения не привносят семантику в документ, вы можете просто определить URL base64 в качестве фона элемента, не используя <img> по CSS

В противном случае вы можете сохранить строку 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,..."; 
}