企业🤖AI智能体构建引擎,智能编排和调试,一键部署,支持私有化部署方案 广告
[https://github.com/chokcoco/iCSS/issues/30](https://github.com/chokcoco/iCSS/issues/30) CSS 语法 ```css { filter: blur(5px); filter: brightness(0.4); filter: contrast(200%); filter: drop-shadow(16px 16px 20px blue); filter: grayscale(50%); filter: hue-rotate(90deg); filter: invert(75%); filter: opacity(25%); filter: saturate(30%); filter: sepia(60%); /* Apply multiple filters */ filter: contrast(175%) brightness(3%); /* Global values */ filter: inherit; filter: initial; filter: unset; } ``` 下图是一些滤镜效果。 ![](https://img.kancloud.cn/3c/da/3cdacb0340da1d8131ec29ea47afa8b6_1536x594.png) 简单来说,CSS 滤镜就是提供类似 PS 的图形特效,如模糊、锐化、元素变色等功能。通常被用于调整图片,背景和边界的渲染。 <table> <tr> <td width=150px>属性值</td> <td>描述</td> </tr> <tr> <td width=150px>blur(px)</td> <td>给图像设置高斯模糊。"radius"一值设定高斯函数的标准差,或者是屏幕上以多少像素融在一起, 所以值越大越模糊;如果没有设定值,则默认是 0;这个参数可设置 css 长度值,但不接受百分比值。</td> </tr> <tr> <td width=150px>brightness(%)</td> <td>给图片应用一种线性乘法,使其看起来更亮或更暗。如果值是 0%,图像会全黑。值是 100%,则图像无变化。其他的值对应线性乘数效果。值超过 100% 也是可以的,图像会比原来更亮。如果没有设定值,默认是 1。</td> </tr> <tr> <td width=150px>contrast(%)</td> <td>调整图像的对比度。值是 0% 的话,图像会全黑。值是 100%,图像不变。值可以超过 100%,意味着会运用更低的对比。若没有设置值,默认是 1。</td> </tr> <tr> <td width=150px>drop-shadow(h-shadow v-shadow blur spread color)</td> <td>给图像设置阴影效果。阴影是合成在图像下面,可以有模糊度的</td> </tr> <tr> <td width=150px>grayscale(%)</td> <td>将图像转换为灰度图像。值定义转换的比例,值为 100% 则完全转为灰度图像,值为 0% 则图像无变化。若未设置,默认值为 0。</td> </tr> <tr> <td width=150px>hue-rotate(deg)</td> <td>给图像应用色相旋转。"angle" 一值设定图像会被调整的色环角度值,若值为 0 deg则图像无变化。若未设置该值则默认为 0,该值虽然没有最大值,但超过 360deg 的值相当于又绕了一圈。</td> </tr> <tr> <td width=150px>invert(%)</td> <td>反转输入图像。值定义转换的比例。</td> </tr> <tr> <td width=150px>opacity(%)</td> <td>转化图像的透明度,值定义转换的比例。其与 opacity 属性的不同之处在于,一些浏览器为了提升性能会提供硬件加速。</td> </tr> <tr> <td width=150px>saturate(%)</td> <td>转换图像饱和度,值定义转换的比例。0% 表示完全不饱和,100% 则图像无变化。</td> </tr> <tr> <td width=150px>url()</td> <td>URL 函数接受一个 XML 文件,该文件设置了一个 SVG 滤镜,且可以包含一个锚点来指定一个具体的滤镜元素。例如:filter: url(svg-url#element-id)</td> </tr> </table> # 用例 ## `filter: blur()`生成毛玻璃效果 ## `filter: drop-shadow()` 生成整体阴影效果 ## contrast / brightness 用于 hover 增亮图片 通常页面上的按钮,都会有 hover / active 的颜色变化,以增强与用户的交互。但是一些图片展示,则很少有 hover 的交互,运用`filter: contrast()`或`filter: brightness()`可以在 hover 图片的时候,调整图片的对比度或者亮度,从而达到聚焦用户视野的目的。 ```css .btn:hover, .img:hover { transition: filter .3s; filter: brightness(1.1) contrast(110%); } ```