首頁 > web前端 > css教學 > 主體

詳解CSS3的filter濾鏡屬性

小云云
發布: 2017-12-19 10:38:34
原創
2226 人瀏覽過

最近發現了一個非常強大的CSS3屬性,就是filter(濾鏡)屬性,喜歡p圖的朋友看名字都應該知道這是什麼神器了吧。當然,這個屬性的效果絕對不能跟ps相比,但利用的好的話可以在節約很多空間下,把一張圖做成兩張圖的效果。本文主要介紹了詳解CSS3中強大的filter(濾鏡)屬性的相關資料,需要的朋友可以參考下,希望能幫助到大家。

1、定義

filter,從字面意思來看就是濾鏡,官方定義filter屬性定義了元素(通常是)的可視效果(例如:模糊與飽和度);舉個栗子:

<style>
    img{
      /*灰度100%*/
        -webkit-filter:grayscale(100%);
    }
</style>
<img src="img/boke.png" alt="">
登入後複製

    

看到這個效果,博友們是不是都開始對filter開始感興趣了呢?

2、語法

filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();

#可以看到,屬性有很多可選值,他們都是什麼意思呢?

  1. grayscale灰階

  2. sepia褐色(有種復古的舊照片感覺)

  3. saturate飽和度

  4. hue-rotate色相旋轉

  5. invert反色

  6. opacity透明度

  7. brightness亮度

  8. contrast對比

  9. blur模糊

  10. drop-shadow陰影

舉個栗子:

#這裡用sepia調整

 <head>
     <meta charset="UTF-8">
      <title>Title</title>
      <style>
          .img{

             -webkit-filter:sepia(70%);
          } 
      </style>
  </head>
 <body>
 <img src="img/boke.png" alt="">
 <img class="img" src="img/boke.png" alt="">
 </body>
登入後複製

範例圖片:

3、範例

下面,對filter屬性的其中幾個值做一個範例,其他好玩的東西需要博友們一起發掘,有啥好玩的可以跟我一起分享喲

(1)hue-rotate(色彩旋轉)

效果看圖吧,具體使用效果要靠大家發掘:

     <style>
          .img{
              -webkit-filter:hue-rotate(330deg);
          }
      </style>
  </head>
  <body>
  <img src="img/boke.png" alt="">
  <img class="img" src="img/boke.png" alt="">
 </body>
登入後複製

效果圖:

 

(2)blur(模糊)

blur(模糊效果,單位px)    

     <style>
          .img{
            -webkit-filter:blur(1px);
          }
      </style>
  <body>
  <img src="img/boke.png" alt="">
  <img class="img" src="img/boke.png" alt="">
 </body>
登入後複製

範例圖片:

(3)invert反色

invert反色會吧圖片變成底片的感覺,多說無益,看程式碼:

 <style>
        .img{
            -webkit-filter:invert(100%);
        }
    </style>
<body>
<img src="img/boke.png" alt="">
<img class="img" src="img/boke.png" alt="">
</body>
登入後複製

範例圖:

大家覺得好玩嗎?趕快動手嘗試。

相關建議:

css filter濾鏡的實例講解_html/css_WEB-ITnose

##關於filter濾鏡應用於圖片的兩種創意_經驗交流

CSS3的filter屬性詳細介紹

以上是詳解CSS3的filter濾鏡屬性的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板