圖嵌入HTML本檔測試 
Monday, June 7, 2021, 09:38 AM - 工作日誌   (同類別文章列表)
將圖形直接嵌入HTML檔

1a. 【certutil -encode mypicture.png mypicture.txt】 (Win)
1b. 【base64 -i mypicture.png -o mypicture.txt】 (Mac)
1c. 【base64 mypicture.png > mypicture.txt】 (BSD)

2. in HTML, 【<img src="data:image/png;base64,】
Notice that the last character on that line is a comma.
Do not omit that.

If your image is in the JPEG format (with a ".jpg or ".jpeg" file extension), use "image/jpeg" instead of "image/png". Likewise, if it is a GIF picture (with a ".gif" extension), use "image/gif". This string is technically known as the MIME type, and it tells the browser the type of data that follows.

3. in HTML, Put TXT image after 2

4. in HTML, 【">】 for the end

==
利用CSS定義功能、讓嵌入圖形可重覆使用


1.用<style type="text/css">【定義內容】</style>

2.定義內容範例:

span.word-icon::before {
content: url(data:image/gif;base64,R0lGODlhP..............);}

3.上例定義出一新的span class名為【word-icon】,使用此span class會在其之前(before)放入內容物(content)之定義圖形

4.呼叫語法【<span class="word-icon"></span>】,即可叫出圖形
==

範例

Paragraph with icon.



回應

發表回應
填寫下面來發表回應。









插入項目:






感謝您的回應,此部落格之回應需經管理員確認無不當用字後才能公開,請靜待確認.