滤镜小结

-webkit-filter:blur(px);
1.图像高斯模糊
-webkit-filter:blur(4px);
范围随便写就行,记得加px

  1. 图片进行棕褐色处理
    -webkit-filter:sepia(1);
    处理范围是0-1或者0%-100%
  2. 图片灰色处理
    -webkit-filter:grayscale(1);
    范围是 0-1或者0%-100%
  3. 图片反色处理
    -webkit-filter:invert(1);
    范围是 0-1或者0%-100%
  4. 图像饱和度调节
    -webkit-filter:saturate(30);
    范围是 取值范围>=0数字或百分比 1为无效果,0为灰度图
  5. 图像对比度调节
    -webkit-filter:contrast(90);
    取值范围>=0数字或百分比 1为无效果
  6. 图像亮度调节
    -webkit-filter:brightness(3);
    取值范围>=0数字或百分比 1为无效果
  7. 图像色相旋转
    -webkit-filter:hue-rotate(300deg);
    取值范围0deg-365deg, 0默认值,为无效果
  8. 阴影滤镜
    -webkit-filter:drop-shadow(5px 5px 3px #333);
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 滤镜-webkit-filter:blur(px);1.图像高斯模糊-webkit-filter:blur(4px...
    BrightenSun阅读 367评论 0 1
  • 转载请声明 原文链接 关注公众号获取更多资讯 这篇文章主要总结H5的一些新增的功能以及一些基础归纳,这里只是一个提...
    前端进阶之旅阅读 9,129评论 22 225
  • 今天回来的有些晚,临睡前撩开窗帘看了眼,夜色很美,很迷人,发现自己很久没有关注过夜色了。 秋天是个让人着迷的季节,...
    曼曼风雨阅读 495评论 0 0
  • 图片发自简书App 剛睡醒,做了個夢。夢裏有陽光,有鮮花,有蝴蝶,有草地,我躺在草地上,被陽光照耀著,被空氣滋潤著...
    绿深林阅读 141评论 0 0