當前位置:首頁 > 技術教程>

CSS3濾鏡的常規用法

發表日期:2018-05-23 10:00:56文章編輯:池州網站建設瀏覽次數:6707 標簽:    CSS,濾鏡,網頁,樣式,代碼

說到濾鏡,搞前端的應該都不陌生,因為不管是曾經還是現在,你都有可能用過或者在用Photoshop。所有濾鏡在這個軟件中都是按分類在菜單中。濾鏡,主要是用來實現圖像的各種特殊效果。

簡單來說,CSS濾鏡就是提供類似PS的圖形特效,像模糊,銳化或元素變色等功能。通常被用于調整圖片,背景和邊界的渲染。這篇我來看一下CSS濾鏡中那些常用的用法。

一、常用的

1、使用filter:blur(px) - 生成毛玻璃效果,值越大越模糊。

2、使用filter:drop-shadow() - 生成整體陰影效果,和box-shadow相似,但又不同。

3、使用filter:opacity(%) - 生成透明度,0%是完全不飽和,100%圖像無變化。

下面我舉個例子來看一下它們的用法:

CSS代碼:(如下id值是設定在img元素上)

當鼠標移上去時,顯示出原圖的模樣,具體效果如下所示:

這樣就一目了然了。

二、必需知道的

除了上面說的三種之外,CSS濾鏡還有另外七種,雖然相對來說不是特別常用,但是真的特別有用,尤其是在做一個技巧性的效果的時候,需要組合這些用法,所以,也是我們必需要知道的。

下面通過一些取值來看一下單獨設置時的具體效果:

1、filter: contrast(200%) - 調整圖像的對比度。

2、filter: grayscale(1) - 將圖像轉換為灰度圖像。

3、filter: invert(.9) - 反轉輸入圖像。

4、filter:brightness(.5)- 給圖片應用一種線性乘法,使其看起來更亮或更暗。

5、filter:saturate(6)- 轉換圖像飽和度。

6、filter:sepia(1)- 將圖像轉換為深褐色。

7、filter:hue-rotate(45deg)- 給圖像應用色相旋轉。

當取上面這些值時,我們來看一下具體效果:

總結一下:

寫了10個濾鏡的用法,其實濾鏡的用處不僅限制在單獨去使用它們,更重要的是知道如何組合這些屬性去處理你想要的效果。關于一些技巧性的用法,下次來寫。

全站導航

其他新聞

靈動標簽判斷奇數偶數實現不同的效果奇偶數

這篇文章主要為大家詳細介紹了帝國CMS靈動標簽中用if判斷第幾條附加特殊樣...

日期:2019-06-18

當前欄目下所有的標題分類并給當前標題分類高亮

<?php //判斷當前欄目是否有設置標題分類 $tr=$empire->fetch1("select tti...

日期:2019-05-26

帝國CMS錯誤報告功能啟用、防垃圾灌水、統計、增加報告分類

一、錯誤報告啟用 內容模板加 <a href="&#091;!--news.url--]e/public/repo...

日期:2018-11-24

幾何元素、大膽鋪色、雙重曝光,這些新技能你掌握了嗎?

不知不覺 2018 年的余額已經只剩下六分之一不知道大家年初定下的計劃有沒有...

日期:2018-11-01

列表頁調取副表字段befrom,writer,newstext

列表模板中要調用副表字段內容需要采用&ldquo;list.var支持程序代碼&rdquo;...

日期:2018-10-30

客戶案例

池州某信息技術服務公司網站

網站使用的是PC+移動端判斷跳轉的。主色調為藍色,突出科技主題,呈現服務宗旨...

日期:2019-06-18

池州某加工生產企業工程公司官方網站

...

日期:2019-05-26

某縣生產力促進中心官方網站

...

日期:2019-05-26

廣東中山某大型機械工程公司官方網站

這是廣東一家大型進出口機械設備制造公司,實力雄厚。網站是響應式的。客戶對...

日期:2018-11-06

帝國網站后臺登錄模板(帶動畫)

閑來無事,看到一個很漂亮的登錄模板,就順手修改成了帝國CMS7.5的后臺登錄模板...

日期:2018-11-02

下载麻将游戏四人麻将