巧用CSS濾鏡做圖案文字

請(qǐng)先看看以下演示中的圖案文字。這可不是圖片效果，而是用CSS濾鏡中的Chroma() 語(yǔ)句做成的文本文字，其中文本的內(nèi)容和圖案都可以自由設(shè)定。

先介紹一下這個(gè)神奇的濾鏡：Chroma() 濾鏡。

語(yǔ)法： FILTER:Chroma( Color=#CCCCCC) ，其中“#CCCCCC”是顏色值。

作用效果：如果濾鏡中的像素有顏色與設(shè)定的顏色相同，則該像素變?yōu)橥该鳎ò▓D片的像素）。例如使用的語(yǔ)句是 FILTER:Chroma( Color=#CCCCCC) ，則濾鏡作用范圍內(nèi)所有顏色為“#CCCCCC”的像素都變?yōu)橥该鳌?br />
有了Chroma() 濾鏡，圖案文字的制作就簡(jiǎn)單了。它的實(shí)現(xiàn)代碼只有幾行： <SPAN style="BACKGROUND-IMAGE: URL(across.gif); WIDTH: 300px"> <DIV style="FILTER: Chroma( Color=#CCCCCC); COLOR: #CCCCCC; BACKGROUND-COLOR: #FFFFFF; WIDTH: 300px; FONT: bold 55pt 宋體"> 設(shè)計(jì)在線(xiàn) </DIV> </SPAN> 代碼解釋?zhuān)?br />
一、先看＜SPAN＞標(biāo)簽，它實(shí)際上是作為一個(gè)父容器，作用在于設(shè)定一個(gè)背景圖片作為文字的圖案：

BACKGROUND-IMAGE:URL(across.gif)：設(shè)定背景圖片，這里是“across.gif”，如右圖，原圖為8×8像素，這里為便于大家觀看，放大為64×64； WIDTH:300px：容器的寬度，可以設(shè)小些，甚至是1px，保證背景不溢出。 二、下面看 ＜DIV＞標(biāo)簽，它用 Chroma() 濾鏡把文字變成透明：

Chroma( Color=#CCCCCC) ：設(shè)定過(guò)濾色為“#CCCCCC”； COLOR: #CCCCCC：文字的顏色也為“#CCCCCC”； BACKGROUND-COLOR: #FFFFFF：字體背景色為“#FFFFFF”（白色）； WIDTH:300px：濾鏡作用的寬度，可以設(shè)成和父容器的一樣或更寬（父容器可以被“撐大”）； FONT: bold 55pt 宋體：設(shè)定字體為粗體字、大小為55pt、宋體。

因?yàn)樯厦姘堰^(guò)濾色和字體顏色都設(shè)為了“#CCCCCC”，所以字體是透明的，透過(guò)它可以看到父容器的背景圖片across.gif。當(dāng)然你可以將它們改為其他相同的值而不影響效果，注意不要與字體背景色相同即可

本文來(lái)源于成都網(wǎng)站建設(shè)公司與成都網(wǎng)站設(shè)計(jì)制作公司-創(chuàng)新互聯(lián)成都公司！

新聞名稱(chēng)：巧用CSS濾鏡做圖案文字
瀏覽路徑：http://muchs.cn/news26/312276.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供App設(shè)計(jì)、服務(wù)器托管、品牌網(wǎng)站設(shè)計(jì)、虛擬主機(jī)、響應(yīng)式網(wǎng)站、靜態(tài)網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話(huà)：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)