12

同じページにbase64コードを再挿入せずに、すでに宣言されているbase64データのURLイメージをどのように再インスタンス化しますか？（できれば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>
4

4 に答える 4

5

srcは有効な CSS プロパティではありません。これには使用する必要がありますcontent...

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

機能:ライブデモ

于 2010-10-29T19:31:00.897 に答える
2

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>
于 2010-10-29T19:19:17.340 に答える
1

これを試して：

<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

于 2010-10-29T19:25:46.653 に答える
0

画像がドキュメントにセマンティックをもたらさない場合は、<img>CSSを使用せずに base64 URL を要素の背景として定義できます。

それ以外の場合は、base64 文字列をサーバー側の変数に保存してから、必要な場所にその変数を配置する src を配置できます。

サーバー側の言語を使用できない場合でも、javascript を使用できます (ただし、コンテンツのアクセシビリティのためにスクリプトに依存しない方がよいでしょう)。

var img = document.getElementsByTagName('img'),
    len = img.length;
while (--len) { 
    if (-1 < img[len].className.indexOf('wink'))
        img[len].src = 'data:image/.gif;base64,..."; 
}
于 2010-10-29T19:19:44.733 に答える