滤镜

如果熟悉游戏开发就知道,一些特殊的视觉效果需要用着色器语言实现Shader程序,那么前端领域渲染HTML时是否支持Shader程序呢?目前来看还是不支持的,不过CSS内置了一些滤镜,比如高斯模糊、灰度、明暗、透明化等,也能实现很多炫酷的效果,而且使用非常简单,更强的是这些滤镜还能和过渡动画、关键帧动画结合使用!

不过这些滤镜的实现相对开发人员来说是黑盒的,底层也未必一定是使用硬件加速渲染的,所以性能和兼容性并不能保证,生产环境需要注意。

滤镜种类

  • filter:在当前层上实现滤镜
  • backdrop-filter:为当前层遮挡的内容添加滤镜

滤镜效果

滤镜名 效果
blur 高斯模糊
brightness 亮度
contrast 对比度
drop-shadow 阴影
grayscale 转换为灰度图像
hue-rotate 基于色环角度转换色相
invert 颜色反转
opacity 透明程度
sepia 将图像转换成褐色
saturate 饱和度
作者:Gacfox
版权声明:本网站为非盈利性质,文章如非特殊说明均为原创,版权遵循知识共享协议CC BY-NC-ND 4.0进行授权,转载必须署名,禁止用于商业目的或演绎修改后转载。
Copyright © 2017-2024 Gacfox All Rights Reserved.
Build with NextJS | Sitemap