免费观看又色又爽又黄的小说免费_美女福利视频国产片_亚洲欧美精品_美国一级大黄大色毛片

巧用CSS濾鏡做圖案文字

2024-01-06    分類: 網(wǎng)站建設(shè)

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

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

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

作用效果:如果濾鏡中的像素有顏色與設(shè)定的顏色相同,則該像素變?yōu)橥该鳎ò▓D片的像素)。例如使用的語句是 FILTER:Chroma( Color=#CCCCCC) ,則濾鏡作用范圍內(nèi)所有顏色為“#CCCCCC”的像素都變?yōu)橥该鳌?br />
有了Chroma() 濾鏡,圖案文字的制作就簡單了。它的實現(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è)計在線 </DIV> </SPAN> 代碼解釋:

一、先看<SPAN>標(biāo)簽,它實際上是作為一個父容器,作用在于設(shè)定一個背景圖片作為文字的圖案:

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

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

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

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

新聞名稱:巧用CSS濾鏡做圖案文字
瀏覽路徑:http://m.newbst.com/news26/312276.html

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

廣告

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

網(wǎng)站托管運營