請先看看以下演示中的圖案文字。這可不是圖片效果，而是用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。當然你可以將它們改為其他相同的值而不影響效果，注意不要與字體背景色相同即可

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的html网页制作图案,巧用CSS滤镜做图案文字-网页设计,HTML/CSS的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。