妙用CSS濾鏡為圖片加上特殊效果
2023-12-31 分類(lèi)： 網(wǎng)站建設(shè)
有時(shí)候，我們需要給網(wǎng)頁(yè)中的圖片加一些特殊的效果，比如透明、扭曲、陰影或者翻轉(zhuǎn)等，我們一般都會(huì)想到用Photoshop等一些圖形軟件來(lái)處理，其實(shí)我們也可以利用CSS(層疊式樣表)提供的一些濾鏡來(lái)處理，這對(duì)于不熟悉Photoshop的網(wǎng)友來(lái)說(shuō)，是非常好的一件事。
我們先從較簡(jiǎn)單的開(kāi)始，介紹幾個(gè)沒(méi)有參數(shù)的濾鏡。 1.Gray濾鏡 Gray濾鏡的作用是產(chǎn)生黑白效果 使用方法：<img src="a.gif" style="filter:gray"> 效果如圖所示
2.Invert濾鏡 Invert濾鏡的作用是反色效果 使用方法：<img src="a.gif" style="filter:invert"> 效果如圖所示
3.Xray濾鏡 Xray濾鏡的作用是產(chǎn)生X光效果 使用方法：<img src="a.gif" style="filter:xray"> 效果如圖所示
4.fliph和flipv fliph濾鏡的作用是產(chǎn)生水平翻轉(zhuǎn)效果；flipv濾鏡的作用是產(chǎn)生垂直翻轉(zhuǎn)效果 使用方法：<img src="a.gif" style="filter:fliph">或<img src="a.gif" style="filter:flipv"> 效果如圖所示
接下來(lái)，我們?cè)俳榻B幾個(gè)比較復(fù)雜的濾鏡：
5.alpha濾鏡 alpha濾鏡作用主要是對(duì)圖片的透明度進(jìn)行處理 使用方法：<img src="a.gif" style="filter:alpha(opacity=value1,finishopacity=value2,style=value3)"> 說(shuō)明：value1為圖片的透明值，范圍是0（完全透明）～100（完全不透明） value2為圖片透明度變換結(jié)束時(shí)的透明值，范圍是0（完全透明）～100（完全不透明） 注：該值只有在value3設(shè)定時(shí)才有效 value3為圖片透明度變換方向。取值為1時(shí)，圖片透明度按從左到右線性變化；取值為2時(shí)，圖片透明度從內(nèi)到外沿半徑變化；取值為3時(shí)，圖片透明度從內(nèi)到外呈矩形變化 例：<img src="a.gif" style="filter:alpha(opacity=0,finishopacity=60,style=2)"> 效果如圖所示
6.shadow濾鏡 shadow濾鏡的作用是產(chǎn)生陰影效果 使用方法：<img src="a.gif" style="filter:shadow(color=value1,direction=value2)"> 說(shuō)明：value1為陰影的顏色值，如000000表示黑色 value2為光線照射角度，如135 例：<img src="a.gif" style="filter:shadow(color=000000,direction=135)"> 效果如圖所示
7.wave濾鏡 wave濾鏡的作用是使圖片產(chǎn)生扭曲效果 使用方法：<img src="a.jpg" style="filter:wave(add=value1,freq=value2,lightstrength=value3,phase=value4,strength=value5)"> 說(shuō)明：value1的取值為1時(shí)，將原圖片增加到處理過(guò)的圖片上；為0時(shí)，則不增加 value2為視覺(jué)扭曲的波浪數(shù) value3是波形亮度百分比，取值范圍為0～100 value4為正弦波開(kāi)始偏移的初始量，取值范圍為0～100 value5為波形效果的強(qiáng)度 例：<img src="a.jpg" style="filter:wave(add=0,freq=5,lightstrength=50,phase=0,strength=5)"> 效果如圖所示
下面我們舉一個(gè)簡(jiǎn)單的例子，瀏覽時(shí)會(huì)出現(xiàn)這樣的一個(gè)效果：網(wǎng)頁(yè)上有一個(gè)幾乎透明的圖像，當(dāng)鼠標(biāo)移到圖像上時(shí)，圖像慢慢變清晰；當(dāng)鼠標(biāo)移開(kāi)時(shí)，圖像又恢復(fù)到原來(lái)的透明狀態(tài)。 要實(shí)現(xiàn)這個(gè)功能，需要使用到CSS的alpha濾鏡，并用JavaScript來(lái)控制alpha濾鏡的Opacity值，首現(xiàn)在網(wǎng)頁(yè)中插入一個(gè)圖片，并設(shè)定alpha濾鏡的opacity值，讓圖片透明，圖片代碼為：<img src="a.gif" id="me" style="FILTER:alpha(Opacity=20)">.
JavaScript代碼如下：
<script language="JavaScript"> function ch(n) { if(n=="add") //如果傳入的參數(shù)為add，則將圖片的不透明度增大 if(me.filters.alpha.Opacity<100) { me.filters.alpha.Opacity=me.filters.alpha.Opacity+5; setTimeout("ch('add')",10); }
if(n=="dec") //如果傳入的參數(shù)為dec，則將圖片的不透明度降低 if(me.filters.alpha.Opacity>20) { me.filters.alpha.Opacity=me.filters.alpha.Opacity-5; setTimeout("ch('adc')",10); } } </script>
將上面的代碼加入<head></head>中，然后給圖片加入onMouseOver和onMouseOut動(dòng)作，即<img src="a.gif" id="me" style="FILTER:alpha(Opacity=20)" onMouseOver="ch('add')" onMouseOut="ch('dec')">. 好了，關(guān)于CSS濾鏡我們就介紹到這里，相信各位開(kāi)動(dòng)腦子，一定會(huì)做出更好的效果。
本文來(lái)源于成都網(wǎng)站建設(shè)公司與成都網(wǎng)站設(shè)計(jì)制作公司-創(chuàng)新互聯(lián)成都公司！
我們先從較簡(jiǎn)單的開(kāi)始，介紹幾個(gè)沒(méi)有參數(shù)的濾鏡。 1.Gray濾鏡 Gray濾鏡的作用是產(chǎn)生黑白效果 使用方法：<img src="a.gif" style="filter:gray"> 效果如圖所示
2.Invert濾鏡 Invert濾鏡的作用是反色效果 使用方法：<img src="a.gif" style="filter:invert"> 效果如圖所示
3.Xray濾鏡 Xray濾鏡的作用是產(chǎn)生X光效果 使用方法：<img src="a.gif" style="filter:xray"> 效果如圖所示
4.fliph和flipv fliph濾鏡的作用是產(chǎn)生水平翻轉(zhuǎn)效果；flipv濾鏡的作用是產(chǎn)生垂直翻轉(zhuǎn)效果 使用方法：<img src="a.gif" style="filter:fliph">或<img src="a.gif" style="filter:flipv"> 效果如圖所示
接下來(lái)，我們?cè)俳榻B幾個(gè)比較復(fù)雜的濾鏡：
5.alpha濾鏡 alpha濾鏡作用主要是對(duì)圖片的透明度進(jìn)行處理 使用方法：<img src="a.gif" style="filter:alpha(opacity=value1,finishopacity=value2,style=value3)"> 說(shuō)明：value1為圖片的透明值，范圍是0（完全透明）～100（完全不透明） value2為圖片透明度變換結(jié)束時(shí)的透明值，范圍是0（完全透明）～100（完全不透明） 注：該值只有在value3設(shè)定時(shí)才有效 value3為圖片透明度變換方向。取值為1時(shí)，圖片透明度按從左到右線性變化；取值為2時(shí)，圖片透明度從內(nèi)到外沿半徑變化；取值為3時(shí)，圖片透明度從內(nèi)到外呈矩形變化 例：<img src="a.gif" style="filter:alpha(opacity=0,finishopacity=60,style=2)"> 效果如圖所示
6.shadow濾鏡 shadow濾鏡的作用是產(chǎn)生陰影效果 使用方法：<img src="a.gif" style="filter:shadow(color=value1,direction=value2)"> 說(shuō)明：value1為陰影的顏色值，如000000表示黑色 value2為光線照射角度，如135 例：<img src="a.gif" style="filter:shadow(color=000000,direction=135)"> 效果如圖所示
7.wave濾鏡 wave濾鏡的作用是使圖片產(chǎn)生扭曲效果 使用方法：<img src="a.jpg" style="filter:wave(add=value1,freq=value2,lightstrength=value3,phase=value4,strength=value5)"> 說(shuō)明：value1的取值為1時(shí)，將原圖片增加到處理過(guò)的圖片上；為0時(shí)，則不增加 value2為視覺(jué)扭曲的波浪數(shù) value3是波形亮度百分比，取值范圍為0～100 value4為正弦波開(kāi)始偏移的初始量，取值范圍為0～100 value5為波形效果的強(qiáng)度 例：<img src="a.jpg" style="filter:wave(add=0,freq=5,lightstrength=50,phase=0,strength=5)"> 效果如圖所示
下面我們舉一個(gè)簡(jiǎn)單的例子，瀏覽時(shí)會(huì)出現(xiàn)這樣的一個(gè)效果：網(wǎng)頁(yè)上有一個(gè)幾乎透明的圖像，當(dāng)鼠標(biāo)移到圖像上時(shí)，圖像慢慢變清晰；當(dāng)鼠標(biāo)移開(kāi)時(shí)，圖像又恢復(fù)到原來(lái)的透明狀態(tài)。 要實(shí)現(xiàn)這個(gè)功能，需要使用到CSS的alpha濾鏡，并用JavaScript來(lái)控制alpha濾鏡的Opacity值，首現(xiàn)在網(wǎng)頁(yè)中插入一個(gè)圖片，并設(shè)定alpha濾鏡的opacity值，讓圖片透明，圖片代碼為：<img src="a.gif" id="me" style="FILTER:alpha(Opacity=20)">.
JavaScript代碼如下：
<script language="JavaScript"> function ch(n) { if(n=="add") //如果傳入的參數(shù)為add，則將圖片的不透明度增大 if(me.filters.alpha.Opacity<100) { me.filters.alpha.Opacity=me.filters.alpha.Opacity+5; setTimeout("ch('add')",10); }
if(n=="dec") //如果傳入的參數(shù)為dec，則將圖片的不透明度降低 if(me.filters.alpha.Opacity>20) { me.filters.alpha.Opacity=me.filters.alpha.Opacity-5; setTimeout("ch('adc')",10); } } </script>
將上面的代碼加入<head></head>中，然后給圖片加入onMouseOver和onMouseOut動(dòng)作，即<img src="a.gif" id="me" style="FILTER:alpha(Opacity=20)" onMouseOver="ch('add')" onMouseOut="ch('dec')">. 好了，關(guān)于CSS濾鏡我們就介紹到這里，相信各位開(kāi)動(dòng)腦子，一定會(huì)做出更好的效果。
本文來(lái)源于成都網(wǎng)站建設(shè)公司與成都網(wǎng)站設(shè)計(jì)制作公司-創(chuàng)新互聯(lián)成都公司！
標(biāo)題名稱：妙用CSS濾鏡為圖片加上特殊效果
標(biāo)題路徑：http://jinyejixie.com/news37/311287.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供小程序開(kāi)發(fā)、網(wǎng)站維護(hù)、ChatGPT、商城網(wǎng)站、外貿(mào)建站、動(dòng)態(tài)網(wǎng)站
聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容
- 分析不同等級(jí)的SEO工作者 2023-12-31
- 成都app開(kāi)發(fā)體驗(yàn)O2O社區(qū)“濃縮”時(shí)代！ 2023-12-31
- 成都app開(kāi)發(fā)定制黨政官方App也要純凈整潔！ 2023-12-31
- 網(wǎng)站優(yōu)化--外鏈對(duì)提升排名是否有作用？ 2023-12-31
- CSS3實(shí)現(xiàn)側(cè)邊欄展開(kāi)收起動(dòng)畫(huà) 2023-12-31
- 如何具備優(yōu)秀的網(wǎng)站運(yùn)營(yíng)人員 2023-12-31
- 美國(guó)網(wǎng)站服務(wù)器加速工具CDN 2023-12-31
- 網(wǎng)站建設(shè)如何做好外鏈建設(shè)的原則有哪些 2023-12-31
- 設(shè)計(jì)師的情感決定了網(wǎng)站的情感 2023-12-31
- 網(wǎng)站推廣該從哪里開(kāi)始？ 2023-12-31
- 成都小程序制作難不難？應(yīng)該如何做？ 2023-12-31
- 成都外貿(mào)網(wǎng)站制作報(bào)價(jià) 2023-12-31
- GA網(wǎng)站制作雪糕圖片朋友圈 2023-12-31
- 自傳播網(wǎng)站的“不靠譜”和“可實(shí)現(xiàn)”(傳播盜版網(wǎng)站) 2023-12-31
- 創(chuàng)新海報(bào)設(shè)計(jì)｜韓國(guó)EverydayPractice設(shè)計(jì)工作室 2023-12-31
- 成都網(wǎng)站建設(shè)和推廣的流程 2023-12-31
- 政府網(wǎng)站建設(shè)需要怎么做 2023-12-31
- 數(shù)據(jù)中心在遠(yuǎn)程工作場(chǎng)所的重要性，以及維持虛擬工作環(huán)境的方式 2023-12-31
- 做好網(wǎng)絡(luò)優(yōu)化推廣策略的實(shí)施技巧有哪些 2023-12-31