css的filter属性学习

目录

一、filter是什么？

二、filter方法介绍

1.blur()-模糊

 2.brightness()-亮度

 3.contrast()-对比

 4.grayscale()-灰度

5.hue-rotate()-色相旋转

 6.invert()-反色

7.saturate()-饱和度

 8.sepia()-深褐色

 9.drop-shadow()-阴影

---

一、filter是什么？

filter提供方法对img,video,canvas等进行图形效果处理，例如模糊，灰度，颜色，亮度调整等。

二、filter方法介绍

1.blur()-模糊

代码如下：

//html
<div class="imgBox">
    <img class="imgStyle" src="http://192.168.1.85/child/app-pvbCenter/image/portal-logo.png" alt="">
  </div>
//css
 .imgBox{
      background-color: #63ebe9;
    }
    .imgStyle{
      width: 300px;
      &:hover{
        filter: blur(3px);
        /* 数值越大，越模糊 */
      }
    }

效果如图：

 

 2.brightness()-亮度

代码如下：

filter: brightness(70%);
/* 数值越小，越暗 */

效果如图：

 

 3.contrast()-对比

代码如下：

filter: contrast(200%);
/* 数值越大，对比度越高 */
/* 数值1等于原图，大于1对比度>原图，小于1对比度<原图 */

效果如图：

 

 4.grayscale()-灰度

代码如下：

filter: grayscale(100%);
/* 数值越大，越灰 */
/* 数值0等于原图，1完全灰色*/

效果如图：

 

5.hue-rotate()-色相旋转

代码如下：

filter: hue-rotate(40deg);
/* 根据旋转角度，对比色环得到颜色 */
/* 数值0等于原图*/

效果如图：

 

 6.invert()-反色

代码如下：

filter: invert(50%);
/* 数值0等于原图,100%表示颜色完全反转*/

效果如图：

---

7.saturate()-饱和度

代码如下：

filter: saturate(200%);
/*数值1等于原图,小于1饱和度减小，大于1饱和度增加*/

效果如图：

 8.sepia()-深褐色

代码如下：

filter: sepia(100%);
/*数值0等于原图,数值增加颜色增加，1则是完全深褐色*/

效果如图：

 9.drop-shadow()-阴影

代码如下：

filter: sepia(100%);
/*数值0等于原图,数值增加颜色增加，1则是完全深褐色*/

效果如图：