詳解CSS3中強(qiáng)大的filter(濾鏡)屬性

發(fā)布時(shí)間：2017-06-29 16:44:58 作者：lms_碼農(nóng)

這篇文章主要介紹了詳解CSS3中強(qiáng)大的filter(濾鏡)屬性的相關(guān)資料,需要的朋友可以參考下

博主最近在做網(wǎng)站的過程中發(fā)現(xiàn)了一個(gè)非常強(qiáng)大的CSS3屬性，就是filter(濾鏡)屬性，喜歡p圖的朋友看名字都應(yīng)該知道這是什么神器了吧。當(dāng)然，這個(gè)屬性的效果肯定不能跟ps相比，但是利用的好的話可以在節(jié)約很多空間下，把一張圖做成兩張圖的效果。

1、定義 　　

filter，從字面意思來看就是濾鏡，官方定義filter屬性定義了元素(通常是<img>)的可視效果(例如：模糊與飽和度)；舉個(gè)栗子：

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

看到這個(gè)效果，博友們是不是都開始對filter開始感興趣了呢？

2、語法

可以看到，屬性有很多可選值，他們都是什么意思呢？　　　　

grayscale灰度
sepia褐色（有種復(fù)古的舊照片感覺）
saturate飽和度
hue-rotate色相旋轉(zhuǎn)
invert反色
opacity透明度
brightness亮度
contrast對比度
blur模糊
drop-shadow陰影

舉個(gè)栗子:

這里用sepia調(diào)整

 <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屬性的其中幾個(gè)值做一個(gè)示例，其他好玩的東西需要博友們一起發(fā)掘，有啥好玩的可以跟我一起分享喲

(1)hue-rotate(色彩旋轉(zhuǎn))

效果看圖吧，具體使用效果要靠大家發(fā)掘：

     <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反色會(huì)吧圖片變成底片的感覺，多說無益，看代碼：

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

示例圖片：