CSS list-style-image

CSS list-style-image 可以用圖片取代 ul li 或 ol li 原本預設的項目符號,如此一來,項目的呈現就變得相當的豐富,輕鬆的設計出打勾、箭頭或是可愛圖形等替代符號,能夠顯示圖片的格式包含 jpg、jpeg、png、gif、bmp ... 等常見圖檔格式。list-style-image 的項目替代圖片的位置,通常使用 list-style-position 來控制,所有主流的瀏覽器都支援 list-style-image 語法的項目替代圖片功能。

CSS list-style-image 語法

list-style-image:url(' 要顯示的圖片檔案位置 ');


語法中的 url 括號內放入要顯示的圖片檔案位置,可以是同一台伺服器上的圖檔,也可以引入外部圖檔,若為同一網站根目錄下的圖檔,可以使用簡化的 url 位置,但若是不同伺服器的外部圖檔,則必須使用完整的圖片網址,否則無法顯示圖片,只會顯示原始項目符號。

CSS list-style-image 範例
<style type="text/css">
ul li {
    list-style-image:url('upload/20130930173146.gif');
}
</style>
<ul>
 <li>Test list style image A.</li>
 <li>Test list style image B.</li>
 <li>Test list style image C.</li>
</ul>
以上範例輸出結果如
  • Test list style image A.
  • Test list style image B.
  • Test list style image C.
CSS list-style-image 參數表
參數定義
url
引用圖檔取代原本的項目符號,亦為 list-style-image 最主要功能。
none
不顯示圖片,僅顯示原始項目符號,此為預設值。與不用 list-style-image 同樣意思。
inherit
繼承自父層的規則,IE9 才開始支援,舊版 IE 不支援,不太建議使用。

若不需要圖片式項目符號,僅需圖形式項目符號,可以使用:CSS list-style-type

使用 list-style-image 需要注意引用的圖片是否可以正確顯示,尤其是引用外部圖片的時候,要確認該圖檔是否可外連,以免發生自己的電腦看起來沒問題,換一台電腦就看不到圖檔的窘境。最重要的是,引用圖片不能夠使用未經授權的圖片,網路的世界也需要彼此尊重。

相關主題研究
© Copyright wibibi.com 網頁設計教學百科 基礎的網頁設計規劃、資料庫與程式設計 Since 2012 Englsih version
PHP Smarty MySQL JQuery Apache W3C