Lynx
指引
API
博客
贡献
指引
API
博客
贡献
简体中文

filter

介绍

filter 属性可以将模糊或颜色偏移等图形效果应用于元件

常见问题

在 Android & iOS 平台上，该属性只作用于 view 上，如果 image 组件需要使用 blur 效果，可以直接使用 image 的 blur-radius

目前只支持 grayscale 和 blur 函数。

如果使用 opacity 可以直接给 view 设置属性，相关链接

在 Android 上添加了 grayscale 属性的 view 会创建 GPU 上的离屏缓存，大量的离屏缓存会导致渲染性能下降。在不需要 grayscale 时建议将 filter: grayscale(0) 替换为 filter: none 来移除离屏缓存。

Android blur 说明（OS 版本 < 12）

在使用的时候可以给节点添加 blur-sampling 属性（int 值）设置降采样比例，会提升性能

设置 blur 的区域如果一直更新内容可能会产生性能问题

为了更高的 blur 效率建议 blur-radius 实际大小不超过 25，即最大写 25ppx 或者 25/density 的 px

使用示例

css-apisrc/filter/App.tsx
预览

语法

filter: grayscale(100%);
filter: blur(5px);

形式定义

初始值none
适用元素all elements
是否支持继承no
是否支持动画yes

形式语法

filter = <filter-function>

<filter-function> =
  <blur()>         |
  <grayscale()>    |


<blur()> =
  blur( <length>? )

<grayscale()> =
  grayscale( [ <percentage> ]? )

与 Web 的区别

支持的 function 数量不同

兼容性

LCD tables only load in the browser

除非另有说明，本项目采用知识共享署名 4.0 国际许可协议进行许可，代码示例采用 Apache License 2.0 许可协议进行许可。