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## opacity
10
11opacity(value: number | Resource)
12
13Sets the opacity of the component.
14
15**Widget capability**: Since API version 9, this feature is supported in ArkTS widgets.
16
17**System capability**: SystemCapability.ArkUI.ArkUI.Full
18
19**Parameters**
20
21| Name| Type                                                | Mandatory| Description                                                        |
22| ------ | ---------------------------------------------------- | ---- | ------------------------------------------------------------ |
23| 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.|
24
25
26## Example
27
28```ts
29// xxx.ets
30@Entry
31@Component
32struct OpacityExample {
33  build() {
34    Column({ space: 5 }) {
35      Text('opacity(1)').fontSize(9).width('90%').fontColor(0xCCCCCC)
36      Text().width('90%').height(50).opacity(1).backgroundColor(0xAFEEEE)
37      Text('opacity(0.7)').fontSize(9).width('90%').fontColor(0xCCCCCC)
38      Text().width('90%').height(50).opacity(0.7).backgroundColor(0xAFEEEE)
39      Text('opacity(0.4)').fontSize(9).width('90%').fontColor(0xCCCCCC)
40      Text().width('90%').height(50).opacity(0.4).backgroundColor(0xAFEEEE)
41      Text('opacity(0.1)').fontSize(9).width('90%').fontColor(0xCCCCCC)
42      Text().width('90%').height(50).opacity(0.1).backgroundColor(0xAFEEEE)
43      Text('opacity(0)').fontSize(9).width('90%').fontColor(0xCCCCCC)
44      Text().width('90%').height(50).opacity(0).backgroundColor(0xAFEEEE)
45    }
46    .width('100%')
47    .padding({ top: 5 })
48  }
49}
50```
51
52![opacity.png](figures/opacity.png)
53