1# 透明度设置 2 3设置组件的透明度。 4 5> **说明：** 6> 7> 从API version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 8 9## opacity 10 11opacity(value: number | Resource) 12 13设置组件的不透明度。 14 15**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 16 17**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 18 19**系统能力：** SystemCapability.ArkUI.ArkUI.Full 20 21**参数：** 22 23| 参数名 | 类型 | 必填 | 说明 | 24| ------ | ---------------------------------------------------- | ---- | ------------------------------------------------------------ | 25| value | number \| [Resource](ts-types.md#resource) | 是 | 元素的不透明度，取值范围为0到1，1表示不透明，0表示完全透明，达到隐藏组件效果，但是在布局中占位。 <br> 默认值：1 <br/>**说明：** <br/> 子组件会继承父组件的透明度，并与自身的透明度属性叠加。如：父组件透明度为0.1，子组件设置透明度为0.8，则子组件实际透明度为0.1*0.8=0.08。 | 26 27## opacity<sup>18+</sup> 28 29opacity(opacity: Optional\<number | Resource>) 30 31设置组件的不透明度。与[opacity](#opacity)相比，opacity参数新增了对undefined类型的支持。 32 33**卡片能力：** 从API version 18开始，该接口支持在ArkTS卡片中使用。 34 35**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 36 37**系统能力：** SystemCapability.ArkUI.ArkUI.Full 38 39**参数：** 40 41| 参数名 | 类型 | 必填 | 说明 | 42| ------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 43| opacity | Optional\<number \| [Resource](ts-types.md#resource)> | 是 | 元素的不透明度，取值范围为0到1，1表示不透明，0表示完全透明，达到隐藏组件效果，但是在布局中占位。 <br/> 默认值：1 <br/>**说明：** <br/> 子组件会继承父组件的透明度，并与自身的透明度属性叠加。如：父组件透明度为0.1，子组件设置透明度为0.8，则子组件实际透明度为0.1*0.8=0.08。<br/>当opacity的值为undefined时，恢复为默认不透明度为1的状态。 | 44 45 46## 示例 47 48该示例主要显示通过opacity设置组件的不透明度。 49 50```ts 51// xxx.ets 52@Entry 53@Component 54struct OpacityExample { 55 build() { 56 Column({ space: 5 }) { 57 Text('opacity(1)').fontSize(9).width('90%').fontColor(0xCCCCCC) 58 Text().width('90%').height(50).opacity(1).backgroundColor(0xAFEEEE) 59 Text('opacity(0.7)').fontSize(9).width('90%').fontColor(0xCCCCCC) 60 Text().width('90%').height(50).opacity(0.7).backgroundColor(0xAFEEEE) 61 Text('opacity(0.4)').fontSize(9).width('90%').fontColor(0xCCCCCC) 62 Text().width('90%').height(50).opacity(0.4).backgroundColor(0xAFEEEE) 63 Text('opacity(0.1)').fontSize(9).width('90%').fontColor(0xCCCCCC) 64 Text().width('90%').height(50).opacity(0.1).backgroundColor(0xAFEEEE) 65 Text('opacity(0)').fontSize(9).width('90%').fontColor(0xCCCCCC) 66 Text().width('90%').height(50).opacity(0).backgroundColor(0xAFEEEE) 67 } 68 .width('100%') 69 .padding({ top: 5 }) 70 } 71} 72``` 73 74 75
