html滤镜

滤镜

设置灰度

img{
     
    width:400px ;
    height: auto;
    display: block;
    margin: 0 auto;
    /*滤镜属性
     *设置灰度1为百分之白灰
     * */
    -webkit-filter: grayscale(1);
    transition: all 15s;
    
   }
   正常亮度
   .img2{
     
    /*
     * 亮度属性1正常，2曝光
     */
    -webkit-filter: brightness(1);
   }
   **褐色与模糊度**
   

`.img3{
     
    /*
     * 褐色属性1百分之百
     */
    -webkit-filter: sepia(1);
   }
   .img4{
     
    /*
     * 模糊度设置
     * blur:单位像素
     */
    -webkit-filter: blur(5px);
   }
   

饱和度与胶片底色

.img6{
     
    /*
     * 饱和度
     */
    /*-webkit-filter: saturate(1);*/
    /*胶片底色
    /*-webkit-filter: invert(1);*/
    /*色相旋转*/
    /*-webkit-filter: hue-rotate(0deg);*/
    -webkit-filter: brightness(20) grayscale(1);
   }
   **总代码**
   

```css


 
  
  
  
 
 
  "img1"  src="../0053d旋转图/img/12.png"> 
  "img2" src="../0053d旋转图/img/4.jpg">
  "img3" src="../0053d旋转图/img/6.jpg">
  "img4" src="../0053d旋转图/img/3.jpg">
  "img5" src="../0053d旋转图/img/10.jpg">
  "img6" src="../0053d旋转图/img/10.jpg">