css filter进行图片处理

最新推荐文章于 2024-07-04 18:24:34 发布

Spider--Man

最新推荐文章于 2024-07-04 18:24:34 发布

阅读量1.7k

点赞数

分类专栏： css 文章标签： filter css

本文链接：https://blog.csdn.net/wojiong132/article/details/66974520

版权

css 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

高斯模糊
每一个像素都取周边像素的平均值，高斯模糊函数传入的是模糊半径

<html>
  <head>
    <meta charset="utf-8">
    <style>
      div{margin: 20px;width: 300px;height: 140px;background: url(./bg.jpg);background-size: cover;padding: 20px;}
      .blur{
        /*h：色调，s：饱和度，l：亮度，a：透明度*/
        /*background-color: hsla(0,0%,100%,.3);*/
        /*高斯模糊，每一个像素都取周边像素的平均值，高斯模糊函数传入的是模糊半径*/
        -webkit-filter: blur(2px);
      }
      .brightness{
        /*亮度：函数传入参数是比例，例如下面是默认亮度的2.5倍*/
        -webkit-filter: brightness(2.5)
      }
      .contrast{
        -webkit-filter: contrast(60%)
      }
      .drop-shadow{
        -webkit-filter: drop-shadow(16px 16px 10px black)
      }
      .grayscale{
        -webkit-filter: grayscale(60%)
      }
      .hue-rotate{
        -webkit-filter: hue-rotate(90deg)
      }
      .invert{
        -webkit-filter: invert(100%)
      }
      .opacity{
        -webkit-filter: opacity(60%)
      }
      .saturate{
        -webkit-filter: saturate(200%)
      }
      .sepia{
        -webkit-filter: sepia(100%)
      }
    </style>
  </head>
  <body>
      高斯模糊
      <div class="blur">
      </div>
      亮度
      <div class="brightness">
      </div>
      对比度
      <div class="contrast">
      </div>
      阴影
      <div class="drop-shadow">
      </div>
      灰度
      <div class="grayscale">
      </div>
      色相旋转
      <div class="hue-rotate">
      </div>
      翻转
      <div class="invert">
      </div>
      不透明度
      <div class="opacity">
      </div>
      饱和度
      <div class="saturate">
      </div>
      色偏
      <div class="sepia">
      </div>
  </body>
</html>