巧用CSS濾鏡做圖案文字
- 中國WEB開發者網絡 (http://www.webasp.net)
-- 技術教程 (http://www.webasp.net/article/)
--- 巧用CSS濾鏡做圖案文字 (http://www.webasp.net/article/18/17948.htm)
-- 發佈日期： 2005-04-25
請先看看以下演示中的圖案文字。這可不是圖片效果，而是用CSS濾鏡中的Chroma() 語句做成的文本文字，其中文本的內容和圖案都可以自由設定。
先介紹一下這個神奇的濾鏡：Chroma() 濾鏡。
語法： FILTER:Chroma( Color=#CCCCCC) ，其中「#CCCCCC」是顏色值。
作用效果：如果濾鏡中的像素有顏色與設定的顏色相同，則該像素變為透明（包括圖片的像素）。例如使用的語句是 FILTER:Chroma( Color=#CCCCCC) ，則濾鏡作用範圍內所有顏色為「#CCCCCC」的像素都變為透明。
效果演示：
以下是拷屏圖片，供用低版本瀏覽器的朋友參考：
有了Chroma() 濾鏡，圖案文字的製作就簡單了。它的實現代碼只有幾行：
一、先看＜SPAN＞標籤，它實際上是作為一個父容器，作用在於設定一個背景圖片作為文字的圖案：
BACKGROUND-IMAGE:URL(across.gif)：設定背景圖片，這裡是「across.gif」，如右圖，原圖為8×8像素，這裡為便於大家觀看，放大為64×64；
WIDTH:300px：容器的寬度，可以設小些，甚至是1px，保證背景不溢出。
二、下面看 ＜DIV＞標籤，它用 Chroma() 濾鏡把文字變成透明：
Chroma( Color=#CCCCCC) ：設定過濾色為「#CCCCCC」；
COLOR: #CCCCCC：文字的顏色也為「#CCCCCC」；
BACKGROUND-COLOR: #FFFFFF：字體背景色為「#FFFFFF」（白色）；
WIDTH:300px：濾鏡作用的寬度，可以設成和父容器的一樣或更寬（父容器可以被「撐大」）；
FONT: bold 55pt 細明體：設定字體為粗體字、大小為55pt、細明體。
因為上面把過濾色和字體顏色都設為了「#CCCCCC」，所以字體是透明的，透過它可以看到父容器的背景圖片across.gif。當然你可以將它們改為其他相同的值而不影響效果，注意不要與字體背景色相同即可