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## Attributes 10 11| Name| Type| Default Value| Description| 12| -------- | -------- | -------- | -------- | 13| overlay | value: string,<br>options?: {<br>align?: [Alignment](ts-appendix-enums.md#alignment), <br>offset?: {x?: number, y?: number}<br>} | {<br>align: Alignment.Center,<br>offset: {0, 0}<br>} | Overlay added to the component.<br> **value**: mask text.<br>**options**: text positioning. **align** indicates the location of the text relative to the component. **[offset](ts-universal-attributes-location.md)** indicates the offset of the text relative to the upper left corner of itself. By default, the text is in the upper left corner of the component.<br>If both **align** and **offset** are set, the text is first positioned relative to the component, and then offset relative to the upper left corner of itself.<br>Since API version 9, this API is supported in ArkTS widgets.| 14 15## Example 16 17```ts 18// xxx.ets 19@Entry 20@Component 21struct OverlayExample { 22 build() { 23 Column() { 24 Column() { 25 Text('floating layer') 26 .fontSize(12).fontColor(0xCCCCCC).maxLines(1) 27 Column() { 28 Image($r('app.media.img')) 29 .width(240).height(240) 30 .overlay("Winter is a beautiful season, especially when it snows.", { 31 align: Alignment.Bottom, 32 offset: { x: 0, y: -15 } 33 }) 34 }.border({ color: Color.Black, width: 2 }) 35 }.width('100%') 36 }.padding({ top: 20 }) 37 } 38} 39``` 40 41 42
