2011/07/27

使用 CSS 製作含有背景圖片的彩色 <hr>

給 <hr> 套用特定的 CSS,每次寫 <hr> 都能達到像這樣的最終效果:




首先決定 <hr> 裡使用的背景圖片。這裡是用一個 41x20 像素的圖片:


圖片高度是 20 像素,所以 <hr> 的高度也要 20 像素以便剛好裝下圖片:

<hr style=height:20px>

這是高度 20 像素的 <hr>



再用 background-image:url() 給 <hr> 加入背景圖片:

<hr style=height:20px;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzi4A5hqSLaIsH5bYXTGeG9jy-RO2TLo4xMl0N_eb-nkX62w6t0y-H8kJ6efljayqcsWTnWHb6myXQ2jinVhUkTUcKRmXTZv54alxXnQxiBSjD8S-5uK6I1CEwKGhvqGp8wce2QHyq0w9B/s800/warning.jpg)>

這是高度 20 像素加入背景圖片的 <hr>



最後用 border-style:none 把背景圖片外圈的邊框,也就是 <hr> 的邊框去掉:
(這一步測試的時候不要使用 IE8,不支援)

<hr style=height:20px;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzi4A5hqSLaIsH5bYXTGeG9jy-RO2TLo4xMl0N_eb-nkX62w6t0y-H8kJ6efljayqcsWTnWHb6myXQ2jinVhUkTUcKRmXTZv54alxXnQxiBSjD8S-5uK6I1CEwKGhvqGp8wce2QHyq0w9B/s800/warning.jpg);border-style:none>

這是高度 20 像素加入背景圖片並且去除邊框的最終效果 <hr>


沒有留言 :

張貼留言