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

opacity

介绍

opacity 属性用 0 ~ 1 的数字描述对象的不透明度，1 为完全不透明，0 为完全透明，默认值为 1。改属性会影响其所有的子元件。

CAUTION

opacity 会造成离屏渲染，在 iOS 和 Android 上都会有性能损失。同时，Android 上会造成 overflow:visible 失效，可以使用 overlap={false} 规避， 但会造成背景和内容的透明度分离。

需要使用 overlap-ios 和 overlap 来控制 iOS 和 android 上的背景与内容的透明度组合行为。由于平台限制，iOS 默认为 false， android 默认为 true。

使用示例

css-apisrc/opacity/App.tsx
预览

语法

/* 完全不透明 */
opacity: 1;

/* 半透明 */
opacity: 0.5;

/* 完全透明 */

opacity: 0;

取值

  • <number> number 是一个 0.0 ~ 1.0 的数字，

  • 默认值 1

数值效果
1完全显示
0~1添加透明度
0不显示

形式定义

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

形式语法

opacity: <number>;

与 Web 的区别

与 web 相同。

兼容性

LCD tables only load in the browser

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