For AI agents: the complete documentation index is available at /next/zh/llms.txt, the full documentation bundle is available at /next/zh/llms-full.txt, and this page is available as Markdown at /next/zh/api/css/properties/opacity.md.
Lynx
  • 简体中文
  • opacity

    介绍

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

    Caution

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

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

    使用示例

    语法

    /* 完全不透明 */
    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 许可协议进行许可。