1# Overlay
2
3You can set overlay text for 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## overlay
10
11overlay(value: string | CustomBuilder, options?: { align?: Alignment; offset?: { x?: number; y?: number } })
12
13Applies an overlay of mask text or a custom component to 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   | string \| [CustomBuilder](../arkui-ts/ts-types.md#custombuilder8)<sup>10+</sup> | Yes  | Mask text content or custom component constructor.<br>**NOTE**<br>When the overlay is a custom component, it cannot obtain focus through sequential keyboard navigation.|
24| options |  {<br>align?: [Alignment](ts-appendix-enums.md#alignment), <br>offset?: {x?: number, y?: number}<br>} | No  | Position of the overlay.<br>- **align**: position of the overlay relative to the component.<br>- **offset**: offset of the overlay relative to the upper left corner of itself. By default, the overlay is in the upper left corner of the component.<br>**NOTE**<br>If both **align** and **offset** are set, the overlay is first positioned relative to the component, and then offset relative to the upper left corner of itself.|
25
26## Example
27
28### Example 1
29
30```ts
31// xxx.ets
32@Entry
33@Component
34struct OverlayExample {
35  build() {
36    Column() {
37      Column() {
38        Text('floating layer')
39          .fontSize(12).fontColor(0xCCCCCC).maxLines(1)
40        Column() {
41          Image($r('app.media.img'))
42            .width(240).height(240)
43            .overlay("Winter is a beautiful season, especially when it snows.", {
44              align: Alignment.Bottom,
45              offset: { x: 0, y: -15 }
46            })
47        }.border({ color: Color.Black, width: 2 })
48      }.width('100%')
49    }.padding({ top: 20 })
50  }
51}
52```
53
54![en-us_image_0000001212058472](figures/en-us_image_0000001212058472.png)
55
56### Example 2
57
58```ts
59// xxx.ets
60@Entry
61@Component
62struct OverlayExample {
63  @Builder OverlayNode() {
64    Column() {
65      Image($r('app.media.img1'))
66      Text("This is overlayNode").fontSize(20).fontColor(Color.White)
67    }.width(180).height(180).alignItems(HorizontalAlign.Center)
68  }
69
70  build() {
71    Column() {
72      Image($r('app.media.img2'))
73        .overlay(this.OverlayNode(), { align: Alignment.Center })
74        .objectFit(ImageFit.Contain)
75    }.width('100%')
76    .border({ color: Color.Black, width: 2 }).padding(20)
77  }
78}
79```
80![en-us_image_0000001210111632](figures/en-us_image_0000001210111632.png)
81