1# Background 2 3You can set the background for a component. 4 5> **NOTE** 6> 7> The initial 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## background<sup>10+</sup> 10 11background(builder: CustomBuilder, options?: { align?: Alignment }): T 12 13Sets the background color of the component. 14 15**Atomic service API**: This API can be used in atomic services since API version 11. 16 17**System capability**: SystemCapability.ArkUI.ArkUI.Full 18 19**Parameters** 20 21| Name | Type | Mandatory| Description | 22| ------- | ---------------------------------------------------- | ---- | ------------------------------------------------------------ | 23| builder | [CustomBuilder](ts-types.md#custombuilder8) | Yes | Custom background. | 24| options | {align?:[Alignment](ts-appendix-enums.md#alignment)} | No | Alignment mode between the custom background and the component.| 25 26**Return value** 27 28| Type | Description | 29| ------ | ------------------------ | 30| T | Current component.| 31 32> **NOTE** 33> 34> - The custom background takes some time to render, during which it cannot respond to events, or be dynamically updated. This attribute cannot be nested or be previewed in DevEco Studio Previewer. 35> - If **background**, **backgroundColor**, and **backgroundImage** are set at the same time, all three will take effect, with **background** displayed at the top layer. 36 37## background<sup>20+</sup> 38 39background(content: CustomBuilder | ResourceColor, options?: BackgroundOptions): T 40 41Sets the background color of the component. Compared with [background](#background10), this API supports the [ResourceColor](ts-types.md#resourcecolor) type for the **content** parameter and allows the background to extend into the parent component's safe area. 42 43**Atomic service API**: This API can be used in atomic services since API version 20. 44 45**System capability**: SystemCapability.ArkUI.ArkUI.Full 46 47**Parameters** 48 49| Name | Type | Mandatory| Description | 50| ------- | ---------------------------------------------------- | ---- | ------------------------------------------------------------ | 51| content | [CustomBuilder](ts-types.md#custombuilder8) \| [ResourceColor](ts-types.md#resourcecolor) | Yes | Custom background. | 52| options | [BackgroundOptions](#backgroundoptions20) | No | Custom background options.| 53 54**Return value** 55 56| Type| Description| 57| -------- | -------- | 58| T | Current component.| 59 60> **NOTE** 61> 62> - The custom background takes some time to render, during which it cannot respond to events, or be dynamically updated. This attribute cannot be nested or be previewed in DevEco Studio Previewer. 63> - If **background**, **backgroundColor**, and **backgroundImage** are set at the same time, all three will take effect, with the stacking order following the rules below: 64> - If **background** is of the **ResourceColor** type or the **ignoresLayoutSafeAreaEdges** property is set, **background** is at the bottom layer. 65> - In other cases, **background** is at the top layer. 66 67## BackgroundOptions<sup>20+</sup> 68 69Provides background options. 70 71**System capability**: SystemCapability.ArkUI.ArkUI.Full 72 73| Name | Type | Mandatory| Description | 74| ------------- | ------ | ---- | ------------------------------------------------------------ | 75| align<sup>10+</sup> | [Alignment](ts-appendix-enums.md#alignment) | No | Alignment mode between the custom background and the component. This property takes effect only for backgrounds of the **CustomBuilder** type. If **ignoresLayoutSafeAreaEdges** is set, alignment applies to the expanded safe area.<br>Default value: **Alignment.Center**.<br>**Atomic service API**: This API can be used in atomic services since API version 11.| 76| ignoresLayoutSafeAreaEdges | Array<[LayoutSafeAreaEdge](ts-types.md#layoutsafeareaedge12)> | No | Safe area edges into which the background extends. If this property is not set, backgrounds of the **CustomBuilder** type do not extend, and backgrounds of the **ResourceColor** type extend to all safe areas of the parent component.<br> Default value: **[]**.<br>**NOTE**<br>Dynamically adjusting this property will regenerate the background according to the set extended area.<br>**Atomic service API**: This API can be used in atomic services since API version 20.| 77 78> **NOTE** 79> 80> The **ignoreLayoutSafeArea** settings take effect only if the parent component has [safeAreaPadding](./ts-universal-attributes-size.md#safeareapadding14) configured for the corresponding directions. 81 82## backgroundColor 83 84backgroundColor(value: ResourceColor): T 85 86Sets the background color of the component. 87 88**Widget capability**: This API can be used in ArkTS widgets since API version 9. 89 90**Atomic service API**: This API can be used in atomic services since API version 11. 91 92**System capability**: SystemCapability.ArkUI.ArkUI.Full 93 94**Parameters** 95 96| Name| Type | Mandatory| Description | 97| ------ | ------------------------------------------ | ---- | ------------------ | 98| value | [ResourceColor](ts-types.md#resourcecolor) | Yes | Background color of the component.| 99 100**Return value** 101 102| Type | Description | 103| ------ | ------------------------ | 104| T | Current component.| 105 106## backgroundColor<sup>18+</sup> 107 108backgroundColor(color: Optional\<ResourceColor>): T 109 110Sets the background color of the component. Compared to [backgroundColor](#backgroundcolor), the **color** parameter supports the **undefined** type. 111 112**Widget capability**: This API can be used in ArkTS widgets since API version 18. 113 114**Atomic service API**: This API can be used in atomic services since API version 18. 115 116**System capability**: SystemCapability.ArkUI.ArkUI.Full 117 118**Parameters** 119 120| Name| Type | Mandatory| Description | 121| ------ | ----------------------------------------------------- | ---- | ------------------------------------------------------------ | 122| color | Optional\<[ResourceColor](ts-types.md#resourcecolor)> | Yes | Background color of the component.<br>If **color** is **undefined**, the background color reverts to the default transparent color.| 123 124**Return value** 125 126| Type | Description | 127| ------ | ------------------------ | 128| T | Current component.| 129 130> **NOTE** 131> 132> If the background color is specified through **inactiveColor** in [backgroundBlurStyle](#backgroundblurstyle9), avoid setting the background color again using **backgroundColor**. 133 134## backgroundColor<sup>20+</sup> 135 136backgroundColor(color: Optional<ResourceColor | ColorMetrics>): T 137 138Sets the background color of the component. Compared with [backgroundColor](#backgroundcolor18), this API supports the [ColorMetrics](../js-apis-arkui-graphics.md#colormetrics12) type for the **color** parameter. 139 140**Widget capability**: This API can be used in ArkTS widgets since API version 20. 141 142**Atomic service API**: This API can be used in atomic services since API version 20. 143 144**System capability**: SystemCapability.ArkUI.ArkUI.Full 145 146**Parameters** 147 148| Name| Type | Mandatory| Description | 149| ------ | ----------------------------------------------------- | ---- | ------------------------------------------------------------ | 150| color | Optional\<[ResourceColor](ts-types.md#resourcecolor) \| [ColorMetrics](../js-apis-arkui-graphics.md#colormetrics12)> | Yes | Background color of the component.<br>If **color** is **undefined**, the background color reverts to the default transparent color.| 151 152**Return value** 153 154| Type | Description | 155| ------ | ------------------------ | 156| T | Current component.| 157 158## backgroundImage 159 160backgroundImage(src: ResourceStr | PixelMap, repeat?: ImageRepeat): T 161 162Sets the background image of the component. 163 164**Widget capability**: This API can be used in ArkTS widgets since API version 9. 165 166**Atomic service API**: This API can be used in atomic services since API version 11. 167 168**System capability**: SystemCapability.ArkUI.ArkUI.Full 169 170**Parameters** 171 172| Name| Type | Mandatory| Description | 173| ------ | ----------------------------------------------- | ---- | ------------------------------------------------------------ | 174| src | [ResourceStr](ts-types.md#resourcestr) \| [PixelMap<sup>12+</sup>](../../apis-image-kit/arkts-apis-image-PixelMap.md) | Yes | Image address, which can be the address of an online or local image, a Base64 encoded string, or a pixel map. SVG and GIF images are not supported.| 175| repeat | [ImageRepeat](ts-appendix-enums.md#imagerepeat) | No | Whether the background image is repeated. By default, the background image is not repeated. If the set image has a transparent background and **backgroundColor** is set, the image is overlaid on the background color.| 176 177**Return value** 178 179| Type | Description | 180| ------ | ------------------------ | 181| T | Current component.| 182 183## backgroundImage<sup>18+</sup> 184 185backgroundImage(src: ResourceStr | PixelMap, options?: BackgroundImageOptions): T 186 187Sets the background image of the component. Compared with [backgroundImage](#backgroundimage), this API allows you to specify synchronous or asynchronous loading modes for images. 188 189**Widget capability**: This API can be used in ArkTS widgets since API version 18. 190 191**Atomic service API**: This API can be used in atomic services since API version 18. 192 193**System capability**: SystemCapability.ArkUI.ArkUI.Full 194 195**Parameters** 196 197| Name| Type | Mandatory| Description | 198| ------ | ----------------------------------------------- | ---- | ------------------------------------------------------------ | 199| src | [ResourceStr](ts-types.md#resourcestr) \| [PixelMap](../../apis-image-kit/arkts-apis-image-PixelMap.md) | Yes | Image address, which can be the address of an online or local image, a Base64 encoded string, or a pixel map. SVG and GIF images are not supported.| 200| options | [BackgroundImageOptions](ts-universal-attributes-image-effect.md#backgroundimageoptions18) | No | Background image options.| 201 202**Return value** 203 204| Type | Description | 205| ------ | ------------------------ | 206| T | Current component.| 207 208## backgroundImageSize 209 210backgroundImageSize(value: SizeOptions | ImageSize): T 211 212Sets the width and height of the background image for the component. 213 214**Widget capability**: This API can be used in ArkTS widgets since API version 9. 215 216**Atomic service API**: This API can be used in atomic services since API version 11. 217 218**System capability**: SystemCapability.ArkUI.ArkUI.Full 219 220**Parameters** 221 222| Name| Type | Mandatory| Description | 223| ------ | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 224| value | [SizeOptions](ts-universal-attributes-size.md#sizeoptions) \| [ImageSize](ts-appendix-enums.md#imagesize) | Yes | Width and height of the background image. If the input is a **{width: Length, height: Length}** object and only one attribute is set, the other attribute is the set value multiplied by the original aspect ratio of the image. By default, the original image aspect ratio remains unchanged.<br>The value range of **width** and **height** is [0, +∞).<br>Default value: **ImageSize.Auto**.<br>**NOTE**<br>If both **width** and **height** are set to values less than or equal to 0, they are treated as 0. If either **width** or **height** is unset or set to a value less than or equal to 0, the other one is adjusted based on the original aspect ratio of the image.| 225 226**Return value** 227 228| Type | Description | 229| ------ | ------------------------ | 230| T | Current component.| 231 232## backgroundImagePosition 233 234backgroundImagePosition(value: Position | Alignment): T 235 236Sets the position of the component background image. 237 238**Widget capability**: This API can be used in ArkTS widgets since API version 9. 239 240**Atomic service API**: This API can be used in atomic services since API version 11. 241 242**System capability**: SystemCapability.ArkUI.ArkUI.Full 243 244**Parameters** 245 246| Name| Type | Mandatory| Description | 247| ------ | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 248| value | [Position](ts-types.md#position) \| [Alignment](ts-appendix-enums.md#alignment) | Yes | Position of the background image in the component, that is, the coordinates relative to the upper left corner of the component.<br>Default value:<br>{<br>x: 0,<br>y: 0<br>} <br> When **x** and **y** are set in percentage, the offset is calculated based on the width and height of the component.| 249 250**Return value** 251 252| Type | Description | 253| ------ | ------------------------ | 254| T | Current component.| 255 256## BlurStyle<sup>9+</sup> 257 258Enumerates blur styles. 259 260**System capability**: SystemCapability.ArkUI.ArkUI.Full 261 262| Name | Description | 263| -------------------- | --------- | 264| Thin | Thin material.<br>**Widget capability**: This API can be used in ArkTS widgets since API version 9.<br>**Atomic service API**: This API can be used in atomic services since API version 11. | 265| Regular | Regular material.<br>**Widget capability**: This API can be used in ArkTS widgets since API version 9.<br>**Atomic service API**: This API can be used in atomic services since API version 11.| 266| Thick | Thick material.<br>**Widget capability**: This API can be used in ArkTS widgets since API version 9.<br>**Atomic service API**: This API can be used in atomic services since API version 11. | 267| BACKGROUND_THIN<sup>10+</sup> | Material that creates the minimum depth of field effect.<br>**Widget capability**: This API can be used in ArkTS widgets since API version 11.<br>**Atomic service API**: This API can be used in atomic services since API version 11. | 268| BACKGROUND_REGULAR<sup>10+</sup> | Material that creates a medium shallow depth of field effect.<br>**Widget capability**: This API can be used in ArkTS widgets since API version 11.<br>**Atomic service API**: This API can be used in atomic services since API version 11. | 269| BACKGROUND_THICK<sup>10+</sup> | Material that creates a high shallow depth of field effect.<br>**Widget capability**: This API can be used in ArkTS widgets since API version 11.<br>**Atomic service API**: This API can be used in atomic services since API version 11. | 270| BACKGROUND_ULTRA_THICK<sup>10+</sup> | Material that creates the maximum depth of field effect.<br>**Widget capability**: This API can be used in ArkTS widgets since API version 11.<br>**Atomic service API**: This API can be used in atomic services since API version 11. | 271| NONE<sup>10+</sup> | No blur.<br>**Widget capability**: This API can be used in ArkTS widgets since API version 10.<br>**Atomic service API**: This API can be used in atomic services since API version 11. | 272| COMPONENT_ULTRA_THIN<sup>11+</sup> | Component ultra-thin material.<br>**Widget capability**: This API can be used in ArkTS widgets since API version 11.<br>**Atomic service API**: This API can be used in atomic services since API version 12.| 273| COMPONENT_THIN<sup>11+</sup> | Component thin material.<br>**Widget capability**: This API can be used in ArkTS widgets since API version 11.<br>**Atomic service API**: This API can be used in atomic services since API version 12.| 274| COMPONENT_REGULAR<sup>11+</sup> | Component regular material.<br>**Widget capability**: This API can be used in ArkTS widgets since API version 11.<br>**Atomic service API**: This API can be used in atomic services since API version 12.| 275| COMPONENT_THICK<sup>11+</sup> | Component thick material.<br>**Widget capability**: This API can be used in ArkTS widgets since API version 11.<br>**Atomic service API**: This API can be used in atomic services since API version 12.| 276| COMPONENT_ULTRA_THICK<sup>11+</sup> | Component ultra-thick material.<br>**Widget capability**: This API can be used in ArkTS widgets since API version 11.<br>**Atomic service API**: This API can be used in atomic services since API version 12.| 277 278## SystemAdaptiveOptions<sup>19+</sup> 279 280Provides parameters for system adaptive adjustments. By default, the system performs adaptive adjustments based on chip performance. 281 282**Widget capability**: This API can be used in ArkTS widgets since API version 19. 283 284**Atomic service API**: This API can be used in atomic services since API version 19. 285 286**System capability**: SystemCapability.ArkUI.ArkUI.Full 287 288| Name | Type | Mandatory| Description | 289| ---- | ---- | ---- | -------------------------- | 290| disableSystemAdaptation | boolean | No | Whether to disable system adaptive adjustment. Whenever possible, do not include this parameter. This parameter only affects low-computing-power devices, the definition of which is determined by the device manufacturer. On low-computing-power devices, the system automatically decides whether to adjust effects (such as blur) to lower-computing-power alternatives based on conditions including computing power and load. To disable this feature, set this parameter to **true**.<br>Default value: **false**| 291 292## backgroundBlurStyle<sup>9+</sup> 293 294backgroundBlurStyle(value: BlurStyle, options?: BackgroundBlurStyleOptions): T 295 296Defines the blur style to apply between the background and content of a component. It encapsulates various blur radius, mask color, mask opacity, saturation, and brightness values through enum values. 297 298**Widget capability**: This API can be used in ArkTS widgets since API version 9. 299 300**Atomic service API**: This API can be used in atomic services since API version 11. 301 302**System capability**: SystemCapability.ArkUI.ArkUI.Full 303 304**Parameters** 305 306| Name | Type | Mandatory| Description | 307| --------------------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 308| value | [BlurStyle](#blurstyle9) | Yes | Settings of the background blur style, including the blur radius, mask color, mask opacity, saturation, and brightness.| 309| options<sup>10+</sup> | [BackgroundBlurStyleOptions](#backgroundblurstyleoptions10)| No | Background blur options.<br>This parameter cannot be used in ArkTS widgets. | 310 311**Return value** 312 313| Type | Description | 314| ------ | ------------------------ | 315| T | Current component.| 316 317## backgroundBlurStyle<sup>18+</sup> 318 319backgroundBlurStyle(style: Optional\<BlurStyle>, options?: BackgroundBlurStyleOptions): T 320 321Defines the blur style to apply between the background and content of a component. It encapsulates various blur radius, mask color, mask opacity, saturation, and brightness values through enum values. Compared to [backgroundBlurStyle<sup>9+</sup>](#backgroundblurstyle9), the **style** parameter supports the **undefined** type. 322 323**Widget capability**: This API can be used in ArkTS widgets since API version 18. 324 325**Atomic service API**: This API can be used in atomic services since API version 18. 326 327**System capability**: SystemCapability.ArkUI.ArkUI.Full 328 329**Parameters** 330 331| Name | Type | Mandatory| Description | 332| --------------------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 333| style | Optional\<[BlurStyle](#blurstyle9)> | Yes | Settings of the background blur style, including the blur radius, mask color, mask opacity, saturation, and brightness.<br>If **style** is **undefined**, the background blur reverts to its default state (that is, no blur).| 334| options | [BackgroundBlurStyleOptions](#backgroundblurstyleoptions10)| No | Background blur options.<br>This parameter cannot be used in ArkTS widgets. | 335 336**Return value** 337 338| Type | Description | 339| ------ | ------------------------ | 340| T | Current component.| 341 342> **NOTE** 343> 344> If the background color is specified through **inactiveColor** in **backgroundBlurStyle**, avoid setting the background color again using [backgroundColor](#backgroundcolor). 345 346## backgroundBlurStyle<sup>19+</sup> 347 348backgroundBlurStyle(style: Optional\<BlurStyle>, options?: BackgroundBlurStyleOptions, sysOptions?: SystemAdaptiveOptions): T 349 350Defines the blur style to apply between the background and content of a component. It encapsulates various blur radius, mask color, mask opacity, saturation, and brightness values through enum values. Compared with [backgroundBlurStyle<sup>18+</sup>](#backgroundblurstyle18), this API adds the **sysOptions** parameter, which allows for system adaptive adjustments. 351 352**Widget capability**: This API can be used in ArkTS widgets since API version 19. 353 354**Atomic service API**: This API can be used in atomic services since API version 19. 355 356**System capability**: SystemCapability.ArkUI.ArkUI.Full 357 358**Parameters** 359 360| Name | Type | Mandatory| Description | 361| --------------------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 362| style | Optional\<[BlurStyle](#blurstyle9)> | Yes | Settings of the background blur style, including the blur radius, mask color, mask opacity, saturation, and brightness.<br>If **style** is **undefined**, the background blur reverts to its default state (that is, no blur).| 363| options | [BackgroundBlurStyleOptions](#backgroundblurstyleoptions10)| No | Background blur options.<br>This parameter cannot be used in ArkTS widgets. | 364| sysOptions | [SystemAdaptiveOptions](#systemadaptiveoptions19) | No | System adaptive adjustment options.<br>Default value: **{ disableSystemAdaptation: false }** | 365 366**Return value** 367 368| Type | Description | 369| ------ | ------------------------ | 370| T | Current component.| 371 372> **NOTE** 373> 374> If the background color is specified through **inactiveColor** in **backgroundBlurStyle**, avoid setting the background color again using [backgroundColor](#backgroundcolor). 375 376## backdropBlur 377 378backdropBlur(value: number, options?: BlurOptions): T 379 380Applies a background blur effect to the component. You can customize the blur radius and grayscale parameters. 381 382**Widget capability**: This API can be used in ArkTS widgets since API version 9. 383 384**Atomic service API**: This API can be used in atomic services since API version 11. 385 386**System capability**: SystemCapability.ArkUI.ArkUI.Full 387 388**Parameters** 389 390| Name | Type | Mandatory| Description | 391| --------------------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 392| value | number | Yes | Background blur effect to apply to the component. The input parameter is the blur radius. The larger the radius is, the more blurred the background is. If the value is **0**, the background is not blurred.| 393| options<sup>11+</sup> | [BlurOptions](ts-universal-attributes-foreground-blur-style.md#bluroptions11) | No | Grayscale parameters. | 394 395**Return value** 396 397| Type | Description | 398| ------ | ------------------------ | 399| T | Current component.| 400 401## backdropBlur<sup>18+</sup> 402 403backdropBlur(radius: Optional\<number>, options?: BlurOptions): T 404 405Background blur effect to apply to the component. You can customize the blur radius and grayscale parameters. Compared to [backdropBlur](#backdropblur), the **radius** parameter supports the **undefined** type. 406 407**Widget capability**: This API can be used in ArkTS widgets since API version 18. 408 409**Atomic service API**: This API can be used in atomic services since API version 18. 410 411**System capability**: SystemCapability.ArkUI.ArkUI.Full 412 413**Parameters** 414 415| Name | Type | Mandatory| Description | 416| --------------------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 417| radius | Optional\<number> | Yes | Background blur effect to apply to the component. The input parameter is the blur radius. The larger the radius is, the more blurred the background is. If the value is **0**, the background is not blurred.<br>If **radius** is **undefined**, the background blur reverts to its default state (that is, no blur).| 418| options | [BlurOptions](ts-universal-attributes-foreground-blur-style.md#bluroptions11) | No | Grayscale parameters. | 419 420**Return value** 421 422| Type | Description | 423| ------ | ------------------------ | 424| T | Current component.| 425 426> **NOTE** 427> 428> The **blur** and **backdropBlur** APIs provide real-time blurring by rendering each frame, which can be performance-intensive. For static blur effects where content and radius remain unchanged, you are advised to use the static [blur](../../apis-arkgraphics2d/js-apis-effectKit.md#blur) API to reduce the load. 429 430## backdropBlur<sup>19+</sup> 431 432backdropBlur(radius: Optional\<number>, options?: BlurOptions, sysOptions?: SystemAdaptiveOptions): T 433 434Applies a background blur effect to the component. You can customize the blur radius and grayscale parameters. Compared with [backdropBlur<sup>18+</sup>](#backdropblur18), this API adds the **sysOptions** parameter, which allows for system adaptive adjustments. 435 436**Widget capability**: This API can be used in ArkTS widgets since API version 19. 437 438**Atomic service API**: This API can be used in atomic services since API version 19. 439 440**System capability**: SystemCapability.ArkUI.ArkUI.Full 441 442**Parameters** 443 444| Name | Type | Mandatory| Description | 445| --------------------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 446| radius | Optional\<number> | Yes | Background blur effect to apply to the component. The input parameter is the blur radius. The larger the radius is, the more blurred the background is. If the value is **0**, the background is not blurred.<br>If **radius** is **undefined**, the background blur reverts to its default state (that is, no blur).| 447| options | [BlurOptions](ts-universal-attributes-foreground-blur-style.md#bluroptions11) | No | Grayscale parameters. | 448| sysOptions | [SystemAdaptiveOptions](#systemadaptiveoptions19) | No | System adaptive adjustment options.<br>Default value: **{ disableSystemAdaptation: false }** | 449 450**Return value** 451 452| Type | Description | 453| ------ | ------------------------ | 454| T | Current component.| 455 456> **NOTE** 457> 458> **backgroundBlurStyle**, **blur**, and **backdropBlur** perform real-time rendering per frame, resulting in high performance overhead. When both the blur content and blur radius remain unchanged, it is recommended that you use the static blur API [blur](../../apis-arkgraphics2d/js-apis-effectKit.md#blur). For best practices, see [Image Blurring Optimization – When to Use](https://developer.huawei.com/consumer/en/doc/best-practices/bpta-fuzzy-scene-performance-optimization#section4945532519). 459 460## backgroundEffect<sup>11+</sup> 461 462backgroundEffect(options: BackgroundEffectOptions): T 463 464Sets the background effect of the component, including the blur radius, brightness, saturation, and color. 465 466**Atomic service API**: This API can be used in atomic services since API version 11. 467 468**System capability**: SystemCapability.ArkUI.ArkUI.Full 469 470**Parameters** 471 472| Name | Type | Mandatory| Description | 473| ------- | ----------------------------------------------------- | ---- | ------------------------------------------ | 474| options | [BackgroundEffectOptions](#backgroundeffectoptions11) | Yes | Background effect, including saturation, brightness, and color.| 475 476**Return value** 477 478| Type | Description | 479| ------ | ------------------------ | 480| T | Current component.| 481 482## backgroundEffect<sup>18+</sup> 483 484backgroundEffect(options: Optional\<BackgroundEffectOptions>): T 485 486Background effect of the component, including the blur radius, brightness, saturation, and color. Compared to [backgroundEffect<sup>11+</sup>](#backgroundeffect11), the **options** parameter supports the **undefined** type. 487 488**Atomic service API**: This API can be used in atomic services since API version 18. 489 490**System capability**: SystemCapability.ArkUI.ArkUI.Full 491 492**Parameters** 493 494| Name | Type | Mandatory| Description | 495| ------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 496| options | Optional\<[BackgroundEffectOptions](#backgroundeffectoptions11)> | Yes | Background effect, including saturation, brightness, and color.<br>If **options** is **undefined**, the background reverts to its default state with no effect.| 497 498**Return value** 499 500| Type | Description | 501| ------ | ------------------------ | 502| T | Current component.| 503 504## backgroundEffect<sup>19+</sup> 505 506backgroundEffect(options: Optional\<BackgroundEffectOptions>, sysOptions?: SystemAdaptiveOptions): T 507 508Sets the background effect of the component, including the blur radius, brightness, saturation, and color. Compared with [backgroundEffect<sup>18+</sup>](#backgroundeffect18), this API adds the **sysOptions** parameter, which allows for system adaptive adjustments. 509 510> **NOTE** 511> 512> **backgroundEffect** performs real-time rendering per frame, resulting in high performance overhead. When the background blur effect remains unchanged, it is recommended that you use the static blur API [blur](../../apis-arkgraphics2d/js-apis-effectKit.md#blur). For best practices, see [Image Blurring Optimization – When to Use](https://developer.huawei.com/consumer/en/doc/best-practices/bpta-fuzzy-scene-performance-optimization#section4945532519). 513 514**Atomic service API**: This API can be used in atomic services since API version 19. 515 516**System capability**: SystemCapability.ArkUI.ArkUI.Full 517 518**Parameters** 519 520| Name | Type | Mandatory| Description | 521| ------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 522| options | Optional\<[BackgroundEffectOptions](#backgroundeffectoptions11)> | Yes | Background effect, including saturation, brightness, and color.<br>If **options** is **undefined**, the background reverts to its default state with no effect.| 523| sysOptions | [SystemAdaptiveOptions](#systemadaptiveoptions19) | No | System adaptive adjustment options.<br>Default value: **{ disableSystemAdaptation: false }** | 524 525**Return value** 526 527| Type | Description | 528| ------ | ------------------------ | 529| T | Current component.| 530 531## BackgroundEffectOptions<sup>11+</sup> 532 533Describes the background effect. 534 535**System capability**: SystemCapability.ArkUI.ArkUI.Full 536 537| Name | Type | Mandatory| Description | 538| ---- | ---- | ---- | -------------------------- | 539| radius | number | Yes | Blur radius.<br>Value range: [0, +∞)<br>Default value: **0**<br> **Atomic service API**: This API can be used in atomic services since API version 12.| 540| saturation | number | No | Saturation.<br>Value range: [0, +∞)<br>Default value: **1** Recommended value range: [0, 50]<br> **Atomic service API**: This API can be used in atomic services since API version 12. | 541| brightness | number | No | Brightness.<br>Value range: [0, +∞)<br>Default value: **1** Recommended value range: [0, 2]<br> **Atomic service API**: This API can be used in atomic services since API version 12.| 542| color | [ResourceColor](ts-types.md#resourcecolor) | No | Color.<br>Default value: transparent<br> **Atomic service API**: This API can be used in atomic services since API version 12. | 543| adaptiveColor | [AdaptiveColor](ts-universal-attributes-foreground-blur-style.md#adaptivecolor10) | No | Adaptive color mode used for the background blur effect.<br>Default value: **DEFAULT** When set to **AVERAGE**, the adaptive color mode takes effect only when the color has transparency.<br> **Atomic service API**: This API can be used in atomic services since API version 12. | 544| blurOptions | [BlurOptions](ts-universal-attributes-foreground-blur-style.md#bluroptions11) | No | Grayscale blur.<br>Default value: **[0, 0]**<br> **Atomic service API**: This API can be used in atomic services since API version 12.| 545| policy<sup>14+</sup> | [BlurStyleActivePolicy](#blurstyleactivepolicy14) | No | Blur activation policy.<br> Default value: **BlurStyleActivePolicy.ALWAYS_ACTIVE**<br> **Atomic service API**: This API can be used in atomic services since API version 14.| 546| inactiveColor<sup>14+</sup> | [ResourceColor](ts-types.md#resourcecolor) | No | Background color of the components within the window after the window loses focus (in which case, the blur effect on the components within the window is removed).<br> **Atomic service API**: This API can be used in atomic services since API version 14.| 547 548## backgroundImageResizable<sup>12+</sup> 549 550backgroundImageResizable(value: ResizableOptions): T 551 552Sets the resizable background image options. 553 554When **ResizableOptions** is set to a valid value, the **repeat** parameter in [backgroundImage](#backgroundimage) does not take effect. 555 556When the sum of the values of **top** and **bottom** is greater than the source image height, or the sum of the values of **left** and **right** is greater than the source image width, the **ResizableOptions** attribute does not take effect. 557 558**Atomic service API**: This API can be used in atomic services since API version 12. 559 560**System capability**: SystemCapability.ArkUI.ArkUI.Full 561 562**Parameters** 563 564| Name| Type | Mandatory| Description | 565| ------ | --------------------------------------- | ---- | -------------------------------- | 566| value | [ResizableOptions](ts-basic-components-image.md#resizableoptions11) | Yes | Resizable image options.| 567 568**Return value** 569 570| Type | Description | 571| ------ | ------------------------ | 572| T | Current component.| 573 574## BackgroundBlurStyleOptions<sup>10+</sup> 575 576Inherits from [BlurStyleOptions](ts-universal-attributes-foreground-blur-style.md#blurstyleoptions). 577 578**Atomic service API**: This API can be used in atomic services since API version 13. 579 580**System capability**: SystemCapability.ArkUI.ArkUI.Full 581 582| Name| Type | Mandatory| Description | 583| ------ | ------------------------------------------------------------ | ---- | ---------------------------------------------------- | 584| policy<sup>14+</sup> | [BlurStyleActivePolicy](#blurstyleactivepolicy14) | No | Blur activation policy.<br> Default value: **BlurStyleActivePolicy.ALWAYS_ACTIVE**| 585| inactiveColor<sup>14+</sup> | [ResourceColor](ts-types.md#resourcecolor) | No | Background color of the components within the window after the window loses focus (in which case, the blur effect on the components within the window is removed).| 586 587## BlurStyleActivePolicy<sup>14+</sup> 588 589**Atomic service API**: This API can be used in atomic services since API version 14. 590 591**System capability**: SystemCapability.ArkUI.ArkUI.Full 592 593| Name | Value|Description | 594| ------ | ----------------------------- |----------------------------- | 595| FOLLOWS_WINDOW_ACTIVE_STATE| 0|The blur effect changes according to the window's focus state; it is inactive when the window is not in focus and active when the window is in focus.| 596| ALWAYS_ACTIVE | 1|The blur effect is always active.| 597| ALWAYS_INACTIVE |2 |The blur effect is always inactive.| 598 599## backgroundBrightness<sup>12+</sup> 600 601backgroundBrightness(params: BackgroundBrightnessOptions): T 602 603Sets the background brightness of the component. 604 605**Atomic service API**: This API can be used in atomic services since API version 12. 606 607**System capability**: SystemCapability.ArkUI.ArkUI.Full 608 609**Parameters** 610 611| Name| Type | Mandatory| Description | 612| ------ | ------------------------------------------------------------ | ---- | ---------------------------------------------------- | 613| params | [BackgroundBrightnessOptions](#backgroundbrightnessoptions12) | Yes | Parameters for setting the background brightness.| 614 615**Return value** 616 617| Type | Description | 618| ------ | ------------------------ | 619| T | Current component.| 620 621## backgroundBrightness<sup>18+</sup> 622 623backgroundBrightness(options: Optional\<BackgroundBrightnessOptions>): T 624 625Sets the background brightness of the component. Compared to [backgroundBrightness<sup>12+</sup>](#backgroundbrightness12), the **options** parameter supports the **undefined** type. 626 627**Atomic service API**: This API can be used in atomic services since API version 18. 628 629**System capability**: SystemCapability.ArkUI.ArkUI.Full 630 631**Parameters** 632 633| Name | Type | Mandatory| Description | 634| ------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 635| options | Optional\<[BackgroundBrightnessOptions](#backgroundbrightnessoptions12)> | Yes | Parameters for setting the background brightness.<br>If **options** is **undefined**, the background reverts to its default state with no brightness effect.| 636 637**Return value** 638 639| Type | Description | 640| ------ | ------------------------ | 641| T | Current component.| 642 643## BackgroundBrightnessOptions<sup>12+</sup> 644 645Provides background brightness options. 646 647**Atomic service API**: This API can be used in atomic services since API version 12. 648 649**System capability**: SystemCapability.ArkUI.ArkUI.Full 650 651| Name | Type | Mandatory| Description | 652| ------------- | ------ | ---- | ------------------------------------------------------------ | 653| rate | number | Yes | Brightness change rate. A higher rate means that brightness decreases more quickly. If **rate** is set to **0**, **lightUpDegree** will not take effect, meaning no brightening effect will occur.<br>Default value: **0.0**<br>Value range: (0.0, +∞)| 654| lightUpDegree | number | Yes | Light up degree. A greater degree indicates a greater increase in brightness.<br> Default value: **0.0**<br>Value range: [-1.0, 1.0]| 655 656> **NOTE** 657> 658> The brightness (gray scale value) of each pixel in the component background content is calculated using the following formula: 659> Y = (0.299R + 0.587G + 0.114B) / 255.0, where **R**, **G**, and **B** represent red, green, and blue channel values of the pixel, respectively, and **Y** is the gray scale value. This formula normalizes the gray scale value to a range of 0 to 1. 660> The formula for calculating the increase in brightness for each pixel is as follows: ΔY = -rate * Y + lightUpDegree. For example, when rate = 0.5 and lightUpDegree = 0.5, for a pixel with a gray scale value of 0.2, the increase in brightness is -0.5 * 0.2 + 0.5 = 0.4. For a pixel with a gray scale value of 1, the increase in brightness is -0.5 * 1 + 0.5 = 0. 661 662## Example 663 664### Example 1: Setting Basic Background Styles 665 666This example shows how to configure basic background styles by setting **backgroundColor**, **backgroundImage**, **backgroundImageSize**, and **backgroundImagePosition**. 667 668```ts 669// xxx.ets 670@Entry 671@Component 672struct BackgroundExample { 673 674 build() { 675 Column({ space: 5 }) { 676 Text('background color').fontSize(9).width('90%').fontColor(0xCCCCCC) 677 Row().width('90%').height(50).backgroundColor(0xE5E5E5).border({ width: 1 }) 678 679 Text('background image repeat along X').fontSize(9).width('90%').fontColor(0xCCCCCC) 680 Row() 681 .backgroundImage('/comment/bg.jpg', ImageRepeat.X) 682 .backgroundImageSize({ width: '250px', height: '140px' }) 683 .width('90%') 684 .height(70) 685 .border({ width: 1 }) 686 687 Text('background image repeat along Y').fontSize(9).width('90%').fontColor(0xCCCCCC) 688 Row() 689 .backgroundImage('/comment/bg.jpg', ImageRepeat.Y) 690 .backgroundImageSize({ width: '500px', height: '120px' }) 691 .width('90%') 692 .height(100) 693 .border({ width: 1 }) 694 695 Text('background image size').fontSize(9).width('90%').fontColor(0xCCCCCC) 696 Row() 697 .width('90%').height(150) 698 .backgroundImage('/comment/bg.jpg', ImageRepeat.NoRepeat) 699 .backgroundImageSize({ width: 1000, height: 500 }) 700 .border({ width: 1 }) 701 702 Text('background fill the box(Cover)').fontSize(9).width('90%').fontColor(0xCCCCCC) 703 // Occupy all the space of the container, without ensuring that the image is completely displayed. 704 Row() 705 .width(200) 706 .height(50) 707 .backgroundImage('/comment/bg.jpg', ImageRepeat.NoRepeat) 708 .backgroundImageSize(ImageSize.Cover) 709 .border({ width: 1 }) 710 711 Text('background fill the box(Contain)').fontSize(9).width('90%').fontColor(0xCCCCCC) 712 // Maximize the image while ensuring that it can be completely displayed. 713 Row() 714 .width(200) 715 .height(50) 716 .backgroundImage('/comment/bg.jpg', ImageRepeat.NoRepeat) 717 .backgroundImageSize(ImageSize.Contain) 718 .border({ width: 1 }) 719 720 Text('background image position').fontSize(9).width('90%').fontColor(0xCCCCCC) 721 Row() 722 .width(100) 723 .height(50) 724 .backgroundImage('/comment/bg.jpg', ImageRepeat.NoRepeat) 725 .backgroundImageSize({ width: 1000, height: 560 }) 726 .backgroundImagePosition({ x: -500, y: -300 }) 727 .border({ width: 1 }) 728 } 729 .width('100%').height('100%').padding({ top: 5 }) 730 } 731} 732``` 733 734 735 736### Example 2: Setting the Background Blur Style 737 738This example sets the background blur style using **backgroundBlurStyle**. 739 740```ts 741// xxx.ets 742@Entry 743@Component 744struct BackgroundBlurStyleDemo { 745 build() { 746 Column() { 747 Row() { 748 Text("Thin Material") 749 } 750 .width('50%') 751 .height('50%') 752 .backgroundBlurStyle(BlurStyle.Thin, 753 { colorMode: ThemeColorMode.LIGHT, adaptiveColor: AdaptiveColor.DEFAULT, scale: 1.0 }) 754 .position({ x: '15%', y: '30%' }) 755 } 756 .height('100%') 757 .width('100%') 758 .backgroundImage($r('app.media.bg')) 759 .backgroundImageSize(ImageSize.Cover) 760 } 761} 762``` 763 764 765 766### Example 3: Setting the Component Background 767 768This example shows how to set the component background using **background**. 769 770```ts 771// xxx.ets 772@Entry 773@Component 774struct BackgroundExample { 775 @Builder renderBackground() { 776 Column() { 777 Progress({value : 50}) 778 } 779 } 780 781 build() { 782 Column() { 783 Text("content") 784 .width(100) 785 .height(40) 786 .fontColor("#FFF") 787 .position({x:50, y:80}) 788 .textAlign(TextAlign.Center) 789 .backgroundColor(Color.Green) 790 } 791 .width(200).height(200) 792 .background(this.renderBackground) 793 .backgroundColor(Color.Gray) 794 } 795} 796``` 797 798 799 800### Example 4: Setting Component Background Brightness 801 802This example sets the component background brightness using **backgroundBrightness**. 803 804```ts 805// xxx.ets 806@Entry 807@Component 808struct BackgroundBrightnessDemo { 809 build() { 810 Column() { 811 Row() { 812 Text("BackgroundBrightness") 813 } 814 .width(200) 815 .height(100) 816 .position({ x: 100, y: 100 }) 817 .backgroundBlurStyle(BlurStyle.Thin, { colorMode: ThemeColorMode.LIGHT, adaptiveColor: AdaptiveColor.DEFAULT}) 818 .backgroundBrightness({rate:0.5,lightUpDegree:0.5}) // Background brightness 819 } 820 .width('100%') 821 .height('100%') 822 .backgroundImage($r('app.media.image')) 823 .backgroundImageSize(ImageSize.Cover) 824 } 825} 826``` 827 828The following figures show how the component looks with the background brightness set. 829 830When **rate** and **lightUpDegree** are both set to **0.5** 831 832 833 834When **rate** is set to **0.5** and **lightUpDegree** **-0.1** 835 836 837 838The following figure shows how the component looks without the background brightness set. 839 840 841 842### Example 5: Setting Blur Effects 843 844This example shows how to use **blur** to apply a foreground blur effect and **backdropBlur** to apply a background blur effect. 845 846```ts 847// xxx.ets 848@Entry 849@Component 850struct BlurEffectsExample { 851 build() { 852 Column({ space: 10 }) { 853 // Blur the font. 854 Text('font blur').fontSize(15).fontColor(0xCCCCCC).width('90%') 855 Flex({ alignItems: ItemAlign.Center }) { 856 Text('original text').margin(10) 857 Text('blur text') 858 .blur(5).margin(10) 859 Text('blur text') 860 .blur(10, undefined).margin(10) // Set the foreground blur radius to 5 and disable system adaptive adjustment. 861 Text('blur text') 862 .blur(15).margin(10) 863 }.width('90%').height(40) 864 .backgroundColor(0xF9CF93) 865 866 867 // Blur the background. 868 Text('backdropBlur').fontSize(15).fontColor(0xCCCCCC).width('90%') 869 Text() 870 .width('90%') 871 .height(40) 872 .fontSize(16) 873 .backdropBlur(3) 874 .backgroundImage($r('app.media.image')) 875 .backgroundImageSize({ width: 1200, height: 160 }) 876 }.width('100%').margin({ top: 5 }) 877 } 878} 879``` 880 881 882 883### Example 6: Setting Text Blur Effects 884 885This example applies anamorphic blur effects on text using **blendMode** and **backgroundEffect**.<br> 886If unwanted lines appear, make sure the sizes of the two owning components of **blendMode** are the same. If the issue persists, the component bounds may have fallen on the floating-point coordinates. In this case, set the universal attribute [pixelRound](ts-universal-attributes-pixelRound.md#pixelround) to align the component bounds on both sides of the unwanted lines with the integer pixel coordinates. 887 888```ts 889// xxx.ets 890@Entry 891@Component 892struct Index { 893 @State shColor: Color = Color.White; 894 @State sizeDate: number = 20; 895 @State rVal: number = 255; 896 @State gVal: number = 255; 897 @State bVal: number = 255; 898 @State aVal: number = 0.1; 899 @State rad: number = 40; 900 @State satVal: number = 0.8; 901 @State briVal: number = 1.5; 902 build() { 903 Stack() { 904 Image($r('app.media.image')) 905 Column() { 906 Column({ space: 0 }) { 907 Column() { 908 Text('11') 909 .fontSize(144) 910 .fontWeight(FontWeight.Bold) 911 .fontColor('rgba(255,255,255,1)') 912 .fontFamily('HarmonyOS-Sans-Digit') 913 .maxLines(1) 914 .lineHeight(120 * 1.25) 915 .height(120 * 1.25) 916 .letterSpacing(4 * 1.25) 917 Text('42') 918 .fontSize(144) 919 .fontWeight(FontWeight.Bold) 920 .fontColor('rgba(255,255,255,1)') 921 .fontFamily('HarmonyOS-Sans-Digit') 922 .maxLines(1) 923 .lineHeight(120 * 1.25) 924 .height(120 * 1.25) 925 .letterSpacing(4 * 1.25) 926 .shadow({ 927 color: 'rgba(0,0,0,0)', 928 radius: 20, 929 offsetX: 0, 930 offsetY: 0 931 }) 932 Row() { 933 Text('October 16') 934 .fontSize(this.sizeDate) 935 .height(22) 936 .fontWeight('medium') 937 .fontColor('rgba(255,255,255,1)') 938 Text('Monday') 939 .fontSize(this.sizeDate) 940 .height(22) 941 .fontWeight('medium') 942 .fontColor('rgba(255,255,255,1)') 943 } 944 } 945 .blendMode(BlendMode.DST_IN, BlendApplyType.OFFSCREEN) 946 .pixelRound({ 947 start: PixelRoundCalcPolicy.FORCE_FLOOR , 948 top: PixelRoundCalcPolicy.FORCE_FLOOR , 949 end: PixelRoundCalcPolicy.FORCE_CEIL, 950 bottom: PixelRoundCalcPolicy.FORCE_CEIL 951 }) 952 } 953 .blendMode(BlendMode.SRC_OVER, BlendApplyType.OFFSCREEN) 954 .backgroundEffect({ 955 radius: this.rad, 956 saturation: this.satVal, 957 brightness: this.briVal, 958 color: this.getVolumeDialogWindowColor() 959 }) 960 .justifyContent(FlexAlign.Center) 961 .pixelRound({ 962 start: PixelRoundCalcPolicy.FORCE_FLOOR , 963 top: PixelRoundCalcPolicy.FORCE_FLOOR , 964 end: PixelRoundCalcPolicy.FORCE_CEIL, 965 bottom: PixelRoundCalcPolicy.FORCE_CEIL 966 }) 967 } 968 } 969 } 970 getVolumeDialogWindowColor(): ResourceColor | string { 971 return `rgba(${this.rVal.toFixed(0)}, ${this.gVal.toFixed(0)}, ${this.bVal.toFixed(0)}, ${this.aVal.toFixed(0)})`; 972 } 973} 974``` 975 976 977 978### Example 7: Comparing Blur Effects 979 980This example compares three different blur effects: **backgroundEffect**, **backDropBlur**, and **backgroundBlurStyle**. 981 982```ts 983// xxx.ets 984@Entry 985@Component 986struct BackGroundBlur { 987 private imageSize: number = 150; 988 989 build() { 990 Column({ space: 5 }) { 991 // Use backgroundBlurStyle with an enum value to set blur parameters. 992 Stack() { 993 Image($r('app.media.test')) 994 .width(this.imageSize) 995 .height(this.imageSize) 996 Column() 997 .width(this.imageSize) 998 .height(this.imageSize) 999 .backgroundBlurStyle(BlurStyle.Thin) 1000 } 1001 1002 // backgroundEffect allows for custom settings for blur radius, brightness, saturation, and more. 1003 Stack() { 1004 Image($r('app.media.test')) 1005 .width(this.imageSize) 1006 .height(this.imageSize) 1007 Column() 1008 .width(this.imageSize) 1009 .height(this.imageSize) 1010 .backgroundEffect({ radius: 20, brightness: 0.6, saturation: 15 }) 1011 } 1012 1013 // backdropBlur only sets blur radius and grayscale parameters. 1014 Stack() { 1015 Image($r('app.media.test')) 1016 .width(this.imageSize) 1017 .height(this.imageSize) 1018 Column() 1019 .width(this.imageSize) 1020 .height(this.imageSize) 1021 .backdropBlur(20, { grayscale: [30, 50] }) 1022 } 1023 } 1024 .width('100%') 1025 .padding({ top: 5 }) 1026 } 1027} 1028``` 1029 1030 1031 1032### Example 8: Applying a P3 Color Gamut Background Effect 1033 1034This example demonstrates how to apply a P3 color gamut background effect using **backgroundColor**. 1035 1036```ts 1037// xxx.ets 1038// To set the P3 color gamut, use the setColorSpace API in ets/entryability/EntryAbility.ets to set the current window to a wide color gamut. 1039import { ColorMetrics } from '@kit.ArkUI'; 1040 1041@Entry 1042@Component 1043struct P3BackgroundDemo { 1044 @State p3Color: ColorMetrics = ColorMetrics.colorWithSpace(ColorSpace.DISPLAY_P3, 0, 0.3, 0.8, 1); 1045 1046 build() { 1047 Column({ space: 5 }) { 1048 Text('background color with colorMetrics').fontSize(9).width('90%').fontColor(0xCCCCCC) 1049 Row().width('90%').height(50).backgroundColor(this.p3Color) 1050 } 1051 .width('100%') 1052 .height('100%') 1053 } 1054} 1055``` 1056 1057 1058 1059### Example 9: Setting Component Background Extension 1060 1061This example shows how to extend the component's background to the parent component's safe area. 1062 1063```ts 1064import { LengthMetrics } from '@kit.ArkUI'; 1065 1066@Entry 1067@Component 1068struct BackgroundExtension { 1069 @Builder 1070 myImages() { 1071 Column() { 1072 Image($r('app.media.startIcon')) 1073 .width('100%') 1074 .height('100%') 1075 } 1076 } 1077 1078 build() { 1079 Column({space: 10}) { 1080 Stack() { 1081 // A background of the CustomBuilder type with the ignoresLayoutSafeAreaEdges property set extends to the parent component's safe area. 1082 Column() 1083 .size({ width: '100%', height: '100%' }) 1084 .border({ width: 1, color: Color.Red }) 1085 .background( 1086 this.myImages(), 1087 { align: Alignment.Center , ignoresLayoutSafeAreaEdges: [ LayoutSafeAreaEdge.START, LayoutSafeAreaEdge.TOP ] } 1088 ) 1089 } 1090 .size({ width: 300, height: 300 }) 1091 .backgroundColor('#004aaf') 1092 .safeAreaPadding(LengthMetrics.vp(50)) 1093 1094 Stack() { 1095 // A background of the ResourceColor type without the ignoresLayoutSafeAreaEdges property set extends to the parent component's safe area by default. 1096 Column() 1097 .size({ width: '100%', height: '100%' }) 1098 .border({ width: 1, color: Color.Red }) 1099 .background('#d5d5d5', { align: Alignment.Center }) 1100 } 1101 .size({ width: 300, height: 300 }) 1102 .backgroundColor('#707070') 1103 .safeAreaPadding(LengthMetrics.vp(50)) 1104 } 1105 .margin(10) 1106 } 1107} 1108``` 1109 1110 1111
