nhiều trường hợp hình ảnh

url cùng một dữ liệu Làm thế nào để bạn lại nhanh chóng một base64 image url dữ liệu đã được công bố mà không cần phải tái chèn mã base64 trên cùng một trang (tốt nhất với css)nhiều trường hợp hình ảnh

tôi đã cố gắng:

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

Nguồn

2010-10-29 GlassGhost

CSS đó không chính xác, đặt dataURL trong background-image, sau đó bạn có thể tham chiếu theo lớp.

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

Nguồn

2010-10-29 19:19:17

Tại sao sử dụng 'div' s? –

Bạn có thể sử dụng bất kỳ phần tử nào, nhưng việc sử dụng nền trên phần tử 'hình ảnh' không phải là những gì anh ta cần. Để tái sử dụng hình ảnh đơn đó, nó cần phải được thực hiện thông qua CSS. –

@ Dustin Không, bạn không bắt được sự trôi dạt của tôi. Xem câu trả lời của tôi xin vui lòng. –

nếu hình ảnh không mang ngữ nghĩa vào tài liệu bạn chỉ có thể xác định url base64 như một nền tảng của một phần tử mà không sử dụng <img> bởi CSS

Nếu không, bạn có thể tiết kiệm chuỗi base64 trong một Server- variabile bên, sau đó đặt src đặt biến đó bất cứ nơi nào cần

nếu bạn không thể sử dụng ngôn ngữ phía máy chủ, bạn vẫn có thể sử dụng javascript (nhưng tốt hơn là không dựa vào tập lệnh để truy cập nội dung), chỉ cần sử dụng đoạn mã như thế này:

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

Nguồn

2010-10-29 19:19:44

thử điều này:

<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 và 3, Safari, Mobile Safari (trình duyệt iPhone), và Google Chrome hỗ trợ nhúng dữ liệu hình ảnh nhị phân trong file CSS. IE 6 và 7 KHÔNG.

đọc thêm ở đây: http://mark.koli.ch/2009/07/howto-include-binary-image-data-in-cascading-style-sheets-css.html

Nguồn

2010-10-29 19:25:46

src không phải là một thuộc tính CSS hợp lệ. Bạn cần phải sử dụng content cho điều này ...

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

Nó hoạt động: Live Demo

Nguồn

2010-10-29 19:31:00

Tôi tin rằng nó hoạt động, nhưng trong trình duyệt nào (tôi điên)? Tôi đang sử dụng Firefox trong Ubuntu Lynx. – GlassGhost

Điều đó không hoạt động trong FF 3.6 hoặc IE 7/8/9. –

@GlassGhost Tôi đang sử dụng Chrome –

nhiều trường hợp hình ảnh

Trả lời

Các vấn đề liên quan