• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# Opacity
2
3You can set the opacity of a component.
4
5>  **NOTE**
6>
7>  The APIs of this module are supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
8
9
10## Attributes
11
12
13| Name   | Type                                            | Description                                                        |
14| ------- | ---------------------------------------------------- | ------------------------------------------------------------ |
15| opacity | number \| [Resource](ts-types.md#resource) | Opacity of the component. The value ranges from 0 to 1. The value **1** means opaque, and **0** means completely transparent. When being completely transparent, the component is hidden, but still takes up space in the layout.<br/>**NOTE**<br/>A component can inherit the opacity setting from its parent component.<br/>Default value: **1**<br>Since API version 9, this API is supported in ArkTS widgets. |
16
17
18## Example
19
20```ts
21// xxx.ets
22@Entry
23@Component
24struct OpacityExample {
25  build() {
26    Column({ space: 5 }) {
27      Text('opacity(1)').fontSize(9).width('90%').fontColor(0xCCCCCC)
28      Text().width('90%').height(50).opacity(1).backgroundColor(0xAFEEEE)
29      Text('opacity(0.7)').fontSize(9).width('90%').fontColor(0xCCCCCC)
30      Text().width('90%').height(50).opacity(0.7).backgroundColor(0xAFEEEE)
31      Text('opacity(0.4)').fontSize(9).width('90%').fontColor(0xCCCCCC)
32      Text().width('90%').height(50).opacity(0.4).backgroundColor(0xAFEEEE)
33      Text('opacity(0.1)').fontSize(9).width('90%').fontColor(0xCCCCCC)
34      Text().width('90%').height(50).opacity(0.1).backgroundColor(0xAFEEEE)
35      Text('opacity(0)').fontSize(9).width('90%').fontColor(0xCCCCCC)
36      Text().width('90%').height(50).opacity(0).backgroundColor(0xAFEEEE)
37    }
38    .width('100%')
39    .padding({ top: 5 })
40  }
41}
42```
43
44![opacity.png](figures/opacity.png)
45