html滤镜

最新推荐文章于 2024-06-19 22:15:00 发布

h_shinehhh

最新推荐文章于 2024-06-19 22:15:00 发布

阅读量294

点赞数 1

分类专栏：编程文章标签： css 伪对象选择器 html

本文链接：https://blog.csdn.net/h_shinehhh/article/details/108148349

版权

编程专栏收录该内容

1 篇文章 0 订阅

订阅专栏

滤镜

设置灰度

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
<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title></title>
  <style type="text/css">
   img{
    width:400px ;
    height: auto;
    display: block;
    margin: 0 auto;
    /*滤镜属性
     *设置灰度1为百分之白灰
     * */
    -webkit-filter: grayscale(1);
    transition: all 15s;
    
   }
   img:hover{
    
    -webkit-filter:none ;
   }
   .img1{
    -webkit-filter: grayscale(1);
    transition: all 3s;
   }
   .img2{
    /*
     * 亮度属性1正常，2曝光
     */
    -webkit-filter: brightness(1);
   }
   .img3{
    /*
     * 褐色属性1百分之百
     */
    -webkit-filter: sepia(1);
   }
   .img4{
    /*
     * 模糊度设置
     * blur:单位像素
     */
    -webkit-filter: blur(5px);
   }
   .img5{/*
           * 对比度，正常为1 如果调成0，就没有任何对比度，
          */
    -webkit-filter: contrast(3);
   }
   .img6{
    /*
     * 饱和度
     */
    /*-webkit-filter: saturate(1);*/
    /*胶片底色
    /*-webkit-filter: invert(1);*/
    /*色相旋转*/
    /*-webkit-filter: hue-rotate(0deg);*/
    -webkit-filter: brightness(20) grayscale(1);
   }
  </style>
 </head>
 <body>
  <img class="img1"  src="../0053d旋转图/img/12.png"> 
  <img class="img2" src="../0053d旋转图/img/4.jpg">
  <img class="img3" src="../0053d旋转图/img/6.jpg">
  <img class="img4" src="../0053d旋转图/img/3.jpg">
  <img class="img5" src="../0053d旋转图/img/10.jpg">
  <img class="img6" src="../0053d旋转图/img/10.jpg">
 </body>
</html>