1e41f4b71Sopenharmony_ci# Opacity
2e41f4b71Sopenharmony_ci
3e41f4b71Sopenharmony_ciYou can set the opacity of a component.
4e41f4b71Sopenharmony_ci
5e41f4b71Sopenharmony_ci>  **NOTE**
6e41f4b71Sopenharmony_ci>
7e41f4b71Sopenharmony_ci>  The APIs of this module are supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
8e41f4b71Sopenharmony_ci
9e41f4b71Sopenharmony_ci## opacity
10e41f4b71Sopenharmony_ci
11e41f4b71Sopenharmony_ciopacity(value: number | Resource)
12e41f4b71Sopenharmony_ci
13e41f4b71Sopenharmony_ciSets the opacity of the component.
14e41f4b71Sopenharmony_ci
15e41f4b71Sopenharmony_ci**Widget capability**: Since API version 9, this feature is supported in ArkTS widgets.
16e41f4b71Sopenharmony_ci
17e41f4b71Sopenharmony_ci**System capability**: SystemCapability.ArkUI.ArkUI.Full
18e41f4b71Sopenharmony_ci
19e41f4b71Sopenharmony_ci**Parameters**
20e41f4b71Sopenharmony_ci
21e41f4b71Sopenharmony_ci| Name| Type                                                | Mandatory| Description                                                        |
22e41f4b71Sopenharmony_ci| ------ | ---------------------------------------------------- | ---- | ------------------------------------------------------------ |
23e41f4b71Sopenharmony_ci| value  | number \| [Resource](ts-types.md#resource) | Yes  | 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> Default value: **1**<br>**NOTE**<br> A component inherits the opacity setting from its parent component and multiplies it by its own setting. For example, if the opacity of a component is 0.8 and that of its parent component is 0.1, then the actual opacity of the component is 0.1 x 0.8 = 0.8.|
24e41f4b71Sopenharmony_ci
25e41f4b71Sopenharmony_ci
26e41f4b71Sopenharmony_ci## Example
27e41f4b71Sopenharmony_ci
28e41f4b71Sopenharmony_ci```ts
29e41f4b71Sopenharmony_ci// xxx.ets
30e41f4b71Sopenharmony_ci@Entry
31e41f4b71Sopenharmony_ci@Component
32e41f4b71Sopenharmony_cistruct OpacityExample {
33e41f4b71Sopenharmony_ci  build() {
34e41f4b71Sopenharmony_ci    Column({ space: 5 }) {
35e41f4b71Sopenharmony_ci      Text('opacity(1)').fontSize(9).width('90%').fontColor(0xCCCCCC)
36e41f4b71Sopenharmony_ci      Text().width('90%').height(50).opacity(1).backgroundColor(0xAFEEEE)
37e41f4b71Sopenharmony_ci      Text('opacity(0.7)').fontSize(9).width('90%').fontColor(0xCCCCCC)
38e41f4b71Sopenharmony_ci      Text().width('90%').height(50).opacity(0.7).backgroundColor(0xAFEEEE)
39e41f4b71Sopenharmony_ci      Text('opacity(0.4)').fontSize(9).width('90%').fontColor(0xCCCCCC)
40e41f4b71Sopenharmony_ci      Text().width('90%').height(50).opacity(0.4).backgroundColor(0xAFEEEE)
41e41f4b71Sopenharmony_ci      Text('opacity(0.1)').fontSize(9).width('90%').fontColor(0xCCCCCC)
42e41f4b71Sopenharmony_ci      Text().width('90%').height(50).opacity(0.1).backgroundColor(0xAFEEEE)
43e41f4b71Sopenharmony_ci      Text('opacity(0)').fontSize(9).width('90%').fontColor(0xCCCCCC)
44e41f4b71Sopenharmony_ci      Text().width('90%').height(50).opacity(0).backgroundColor(0xAFEEEE)
45e41f4b71Sopenharmony_ci    }
46e41f4b71Sopenharmony_ci    .width('100%')
47e41f4b71Sopenharmony_ci    .padding({ top: 5 })
48e41f4b71Sopenharmony_ci  }
49e41f4b71Sopenharmony_ci}
50e41f4b71Sopenharmony_ci```
51e41f4b71Sopenharmony_ci
52e41f4b71Sopenharmony_ci![opacity.png](figures/opacity.png)
53