圖嵌入HTML本檔測試 
Monday, June 7, 2021, 09:38 AM - 工作日誌   (同類別文章列表)
Posted by Administrator
將圖形直接嵌入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.



發表回應 ( 共計300閱讀人次 )   |  permalink   |  $star_image$star_image$star_image$star_image$star_image ( 3 / 258 )

<<第一頁 <前一頁 | 329 | 330 | 331 | 332 | 333 | 334 | 335 | 336 | 337 | 338 | 下一頁> 最後>>