1# Background 2 3You can set the background 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## background<sup>10+</sup> 10 11background(builder: CustomBuilder, options?: { align?: Alignment }) 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.<br>If **background**, **backgroundColor**, and **backgroundImage** are set at the same time, they will all take effect, with **background** at the top layer.| 25 26> **NOTE** 27> 28> 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. 29 30## backgroundColor 31 32backgroundColor(value: ResourceColor) 33 34Sets the background color of the component. 35 36**Widget capability**: This API can be used in ArkTS widgets since API version 9. 37 38**Atomic service API**: This API can be used in atomic services since API version 11. 39 40**System capability**: SystemCapability.ArkUI.ArkUI.Full 41 42**Parameters** 43 44| Name| Type | Mandatory| Description | 45| ------ | ------------------------------------------ | ---- | ------------------ | 46| value | [ResourceColor](ts-types.md#resourcecolor) | Yes | Background color of the component.| 47 48> **NOTE** 49> 50> If the background color is specified through **inactiveColor** in [backgroundBlurStyle](#backgroundblurstyle9), avoid setting the background color again using **backgroundColor**. 51 52## backgroundImage 53 54backgroundImage(src: ResourceStr | PixelMap, repeat?: ImageRepeat) 55 56Sets the background image of the component. 57 58**Widget capability**: This API can be used in ArkTS widgets since API version 9. 59 60**Atomic service API**: This API can be used in atomic services since API version 11. 61 62**System capability**: SystemCapability.ArkUI.ArkUI.Full 63 64**Parameters** 65 66| Name| Type | Mandatory| Description | 67| ------ | ----------------------------------------------- | ---- | ------------------------------------------------------------ | 68| src | [ResourceStr](ts-types.md#resourcestr) \| [PixelMap<sup>12+</sup>](../../apis-image-kit/js-apis-image.md#pixelmap7) | Yes | Image address, which can be the address of an online or local image, a Base64 encoded string, or a pixel map. SVG images are not supported.| 69| 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.| 70 71## backgroundImageSize 72 73backgroundImageSize(value: SizeOptions | ImageSize) 74 75Sets the width and height of the component background image. 76 77**Widget capability**: This API can be used in ArkTS widgets since API version 9. 78 79**Atomic service API**: This API can be used in atomic services since API version 11. 80 81**System capability**: SystemCapability.ArkUI.ArkUI.Full 82 83**Parameters** 84 85| Name| Type | Mandatory| Description | 86| ------ | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 87| 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.| 88 89## backgroundImagePosition 90 91backgroundImagePosition(value: Position | Alignment) 92 93Sets the position of the component background image. 94 95**Widget capability**: This API can be used in ArkTS widgets since API version 9. 96 97**Atomic service API**: This API can be used in atomic services since API version 11. 98 99**System capability**: SystemCapability.ArkUI.ArkUI.Full 100 101**Parameters** 102 103| Name| Type | Mandatory| Description | 104| ------ | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 105| 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.| 106 107## BlurStyle<sup>9+</sup> 108 109**Widget capability**: This API can be used in ArkTS widgets since API version 9. 110 111**System capability**: SystemCapability.ArkUI.ArkUI.Full 112 113| Name | Description | 114| -------------------- | --------- | 115| Thin | Thin material.<br>**Atomic service API**: This API can be used in atomic services since API version 11. | 116| Regular | Regular material.<br>**Atomic service API**: This API can be used in atomic services since API version 11.| 117| Thick | Thick material.<br>**Atomic service API**: This API can be used in atomic services since API version 11. | 118| BACKGROUND_THIN<sup>10+</sup> | Material that creates the minimum depth of field effect.<br>**Atomic service API**: This API can be used in atomic services since API version 11. | 119| BACKGROUND_REGULAR<sup>10+</sup> | Material that creates a medium shallow depth of field effect.<br>**Atomic service API**: This API can be used in atomic services since API version 11. | 120| BACKGROUND_THICK<sup>10+</sup> | Material that creates a high shallow depth of field effect.<br>**Atomic service API**: This API can be used in atomic services since API version 11. | 121| BACKGROUND_ULTRA_THICK<sup>10+</sup> | Material that creates the maximum depth of field effect.<br>**Atomic service API**: This API can be used in atomic services since API version 11. | 122| NONE<sup>10+</sup> | No blur.<br>**Atomic service API**: This API can be used in atomic services since API version 11. | 123| COMPONENT_ULTRA_THIN<sup>11+</sup> | Component ultra-thin material.<br>**Atomic service API**: This API can be used in atomic services since API version 12.| 124| COMPONENT_THIN<sup>11+</sup> | Component thin material.<br>**Atomic service API**: This API can be used in atomic services since API version 12.| 125| COMPONENT_REGULAR<sup>11+</sup> | Component regular material.<br>**Atomic service API**: This API can be used in atomic services since API version 12.| 126| COMPONENT_THICK<sup>11+</sup> | Component thick material.<br>**Atomic service API**: This API can be used in atomic services since API version 12.| 127| COMPONENT_ULTRA_THICK<sup>11+</sup> | Component ultra-thick material.<br>**Atomic service API**: This API can be used in atomic services since API version 12.| 128 129## backgroundBlurStyle<sup>9+</sup> 130 131backgroundBlurStyle(value: BlurStyle, options?: BackgroundBlurStyleOptions) 132 133Defines 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. 134 135**Widget capability**: This API can be used in ArkTS widgets since API version 9. 136 137**Atomic service API**: This API can be used in atomic services since API version 11. 138 139**System capability**: SystemCapability.ArkUI.ArkUI.Full 140 141**Parameters** 142 143| Name | Type | Mandatory| Description | 144| --------------------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 145| value | [BlurStyle](#blurstyle9) | Yes | Settings of the background blur style, including the blur radius, mask color, mask opacity, saturation, and brightness.| 146| options<sup>10+</sup> | [BackgroundBlurStyleOptions](#backgroundblurstyleoptions10)| No | Background blur options. | 147 148> **NOTE** 149> 150> If the background color is specified through **inactiveColor** in **backgroundBlurStyle**, avoid setting the background color again using [backgroundColor](#backgroundcolor). 151 152## backdropBlur 153 154backdropBlur(value: number, options?: BlurOptions) 155 156Applies a background blur effect to the component. 157 158**Widget capability**: This API can be used in ArkTS widgets since API version 9. 159 160**Atomic service API**: This API can be used in atomic services since API version 11. 161 162**System capability**: SystemCapability.ArkUI.ArkUI.Full 163 164**Parameters** 165 166| Name | Type | Mandatory| Description | 167| --------------------- | ------------------------------------------------- | ---- | ------------------------------------------------------------ | 168| 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.| 169| options<sup>11+</sup> | [BlurOptions](ts-universal-attributes-foreground-blur-style.md#bluroptions11) | No | Grayscale parameters. | 170 171> **NOTE** 172> 173> 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. 174 175## backgroundEffect<sup>11+</sup> 176 177backgroundEffect(options: BackgroundEffectOptions) 178 179Sets the background effect of the component, including the blur radius, brightness, saturation, and color. 180 181**Atomic service API**: This API can be used in atomic services since API version 11. 182 183**System capability**: SystemCapability.ArkUI.ArkUI.Full 184 185**Parameters** 186 187| Name | Type | Mandatory| Description | 188| ------- | ------------------------------------------------------------ | ---- | ------------------------------------------ | 189| options | [BackgroundEffectOptions](#backgroundeffectoptions11) | Yes | Background effect, including saturation, brightness, and color.| 190 191## BackgroundEffectOptions<sup>11+</sup> 192Describes the background effect. 193 194**Atomic service API**: This API can be used in atomic services since API version 12. 195 196**System capability**: SystemCapability.ArkUI.ArkUI.Full 197 198| Name | Type | Mandatory| Description | 199| ---- | ---- | ---- | -------------------------- | 200| radius | number | Yes | Blur radius.<br>Value range: [0, +∞)<br>Default value: **0** | 201| saturation | number | No | Saturation.<br>Value range: [0, +∞)<br>Default value: **1** Recommended value range: [0, 50] | 202| brightness | number | No | Brightness.<br>Value range: [0, +∞)<br>Default value: **1** Recommended value range: [0, 2]| 203| color | [ResourceColor](ts-types.md#resourcecolor) | No | Color.<br>Default value: transparent | 204| 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. | 205| blurOptions | [BlurOptions](ts-universal-attributes-foreground-blur-style.md#bluroptions11) | No | Grayscale blur.<br>Default value: **[0, 0]** | 206| policy<sup>14+</sup> | [BlurStyleActivePolicy](ts-appendix-enums.md#blurstyleactivepolicy14) | No | Blur activation policy.<br> Default value: **BlurStyleActivePolicy.ALWAYS_ACTIVE**| 207| 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).| 208 209## backgroundImageResizable<sup>12+</sup> 210 211backgroundImageResizable(value: ResizableOptions) 212 213Sets the resizable background image options. 214 215When **ResizableOptions** is set to a valid value, the **repeat** parameter in [backgroundImage](#backgroundimage) does not take effect. 216 217When 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. 218 219**Atomic service API**: This API can be used in atomic services since API version 12. 220 221**System capability**: SystemCapability.ArkUI.ArkUI.Full 222 223**Parameters** 224 225| Name| Type | Mandatory| Description | 226| ------ | --------------------------------------- | ---- | -------------------------------- | 227| value | [ResizableOptions](ts-basic-components-image.md#resizableoptions11) | Yes | Resizable image options.| 228 229## BackgroundBlurStyleOptions<sup>10+</sup> 230 231Inherited from [BlurStyleOptions](ts-universal-attributes-foreground-blur-style.md). 232 233**Atomic service API**: This API can be used in atomic services since API version 13. 234 235**System capability**: SystemCapability.ArkUI.ArkUI.Full 236 237| Name| Type | Mandatory| Description | 238| ------ | ------------------------------------------------------------ | ---- | ---------------------------------------------------- | 239| policy<sup>14+</sup> | [BlurStyleActivePolicy](ts-appendix-enums.md#blurstyleactivepolicy14) | No | Blur activation policy.<br> Default value: **BlurStyleActivePolicy.ALWAYS_ACTIVE**| 240| 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).| 241 242 243## backgroundBrightness<sup>12+</sup> 244 245backgroundBrightness(params: BackgroundBrightnessOptions) 246 247Sets the background brightness of the component. 248 249**Atomic service API**: This API can be used in atomic services since API version 12. 250 251**System capability**: SystemCapability.ArkUI.ArkUI.Full 252 253**Parameters** 254 255| Name| Type | Mandatory| Description | 256| ------ | ------------------------------------------------------------ | ---- | ---------------------------------------------------- | 257| params | [BackgroundBrightnessOptions](#backgroundbrightnessoptions12) | Yes | Parameters for setting the background brightness.| 258 259## BackgroundBrightnessOptions<sup>12+</sup> 260 261**Atomic service API**: This API can be used in atomic services since API version 12. 262 263**System capability**: SystemCapability.ArkUI.ArkUI.Full 264 265| Name | Type | Mandatory| Description | 266| ------------- | ------ | ---- | ------------------------------------------------------------ | 267| 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, +∞)| 268| 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]| 269 270> **NOTE** 271> 272> The brightness (gray scale value) of each pixel in the component background content is calculated using the following formula: 273> 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. 274> 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. 275 276## Example 277 278### Example 1: Setting Basic Background Styles 279 280This example shows how to configure basic background styles by setting **backgroundColor**, **backgroundImage**, **backgroundImageSize**, and **backgroundImagePosition**. 281 282```ts 283// xxx.ets 284@Entry 285@Component 286struct BackgroundExample { 287 288 build() { 289 Column({ space: 5 }) { 290 Text('background color').fontSize(9).width('90%').fontColor(0xCCCCCC) 291 Row().width('90%').height(50).backgroundColor(0xE5E5E5).border({ width: 1 }) 292 293 Text('background image repeat along X').fontSize(9).width('90%').fontColor(0xCCCCCC) 294 Row() 295 .backgroundImage('/comment/bg.jpg', ImageRepeat.X) 296 .backgroundImageSize({ width: '250px', height: '140px' }) 297 .width('90%') 298 .height(70) 299 .border({ width: 1 }) 300 301 Text('background image repeat along Y').fontSize(9).width('90%').fontColor(0xCCCCCC) 302 Row() 303 .backgroundImage('/comment/bg.jpg', ImageRepeat.Y) 304 .backgroundImageSize({ width: '500px', height: '120px' }) 305 .width('90%') 306 .height(100) 307 .border({ width: 1 }) 308 309 Text('background image size').fontSize(9).width('90%').fontColor(0xCCCCCC) 310 Row() 311 .width('90%').height(150) 312 .backgroundImage('/comment/bg.jpg', ImageRepeat.NoRepeat) 313 .backgroundImageSize({ width: 1000, height: 500 }) 314 .border({ width: 1 }) 315 316 Text('background fill the box(Cover)').fontSize(9).width('90%').fontColor(0xCCCCCC) 317 // Occupy all the space of the container, without ensuring that the image is completely displayed. 318 Row() 319 .width(200) 320 .height(50) 321 .backgroundImage('/comment/bg.jpg', ImageRepeat.NoRepeat) 322 .backgroundImageSize(ImageSize.Cover) 323 .border({ width: 1 }) 324 325 Text('background fill the box(Contain)').fontSize(9).width('90%').fontColor(0xCCCCCC) 326 // Maximize the image while ensuring that it can be completely displayed. 327 Row() 328 .width(200) 329 .height(50) 330 .backgroundImage('/comment/bg.jpg', ImageRepeat.NoRepeat) 331 .backgroundImageSize(ImageSize.Contain) 332 .border({ width: 1 }) 333 334 Text('background image position').fontSize(9).width('90%').fontColor(0xCCCCCC) 335 Row() 336 .width(100) 337 .height(50) 338 .backgroundImage('/comment/bg.jpg', ImageRepeat.NoRepeat) 339 .backgroundImageSize({ width: 1000, height: 560 }) 340 .backgroundImagePosition({ x: -500, y: -300 }) 341 .border({ width: 1 }) 342 } 343 .width('100%').height('100%').padding({ top: 5 }) 344 } 345} 346``` 347 348 349 350### Example 2: Setting the Background Blur Style 351 352This example sets the background blur style using **backgroundBlurStyle**. 353 354```ts 355// xxx.ets 356@Entry 357@Component 358struct BackgroundBlurStyleDemo { 359 build() { 360 Column() { 361 Row() { 362 Text("Thin Material") 363 } 364 .width('50%') 365 .height('50%') 366 .backgroundBlurStyle(BlurStyle.Thin, { colorMode: ThemeColorMode.LIGHT, adaptiveColor: AdaptiveColor.DEFAULT, scale: 1.0 }) 367 .position({ x: '15%', y: '30%' }) 368 } 369 .height('100%') 370 .width('100%') 371 .backgroundImage($r('app.media.bg')) 372 .backgroundImageSize(ImageSize.Cover) 373 } 374} 375``` 376 377 378 379### Example 3: Setting the Component Background 380 381This example sets the component background using **background**. 382 383```ts 384// xxx.ets 385@Entry 386@Component 387struct BackgroundExample { 388 @Builder renderBackground() { 389 Column() { 390 Progress({value : 50}) 391 } 392 } 393 394 build() { 395 Column() { 396 Text("content") 397 .width(100) 398 .height(40) 399 .fontColor("#FFF") 400 .position({x:50, y:80}) 401 .textAlign(TextAlign.Center) 402 .backgroundColor(Color.Green) 403 } 404 .width(200).height(200) 405 .background(this.renderBackground) 406 .backgroundColor(Color.Gray) 407 } 408} 409``` 410 411 412 413### Example 4: Setting Component Background Brightness 414 415This example sets the component background brightness using **backgroundBrightness**. 416 417```ts 418// xxx.ets 419@Entry 420@Component 421struct BackgroundBrightnessDemo { 422 build() { 423 Column() { 424 Row() { 425 Text("BackgroundBrightness") 426 } 427 .width(200) 428 .height(100) 429 .position({ x: 100, y: 100 }) 430 .backgroundBlurStyle(BlurStyle.Thin, { colorMode: ThemeColorMode.LIGHT, adaptiveColor: AdaptiveColor.DEFAULT}) 431 .backgroundBrightness({rate:0.5,lightUpDegree:0.5}) // Background brightness 432 } 433 .width('100%') 434 .height('100%') 435 .backgroundImage($r('app.media.image')) 436 .backgroundImageSize(ImageSize.Cover) 437 } 438} 439``` 440 441The following figures show how the component looks with the background brightness set. 442 443When **rate** and **lightUpDegree** are both set to **0.5** 444 445 446 447When **rate** is set to **0.5** and **lightUpDegree** **-0.1** 448 449 450 451The following figure shows how the component looks without the background brightness set. 452 453 454 455### Example 5: Setting Blur Effects 456 457This example shows how to use **blur** to apply a foreground blur effect and **backdropBlur** to apply a background blur effect. 458 459```ts 460// xxx.ets 461@Entry 462@Component 463struct BlurEffectsExample { 464 build() { 465 Column({ space: 10 }) { 466 // Blur the font. 467 Text('font blur').fontSize(15).fontColor(0xCCCCCC).width('90%') 468 Flex({ alignItems: ItemAlign.Center }) { 469 Text('original text').margin(10) 470 Text('blur text') 471 .blur(5).margin(10) 472 Text('blur text') 473 .blur(10).margin(10) 474 Text('blur text') 475 .blur(15).margin(10) 476 }.width('90%').height(40) 477 .backgroundColor(0xF9CF93) 478 479 480 // Blur the background. 481 Text('backdropBlur').fontSize(15).fontColor(0xCCCCCC).width('90%') 482 Text() 483 .width('90%') 484 .height(40) 485 .fontSize(16) 486 .backdropBlur(3) 487 .backgroundImage($r('app.media.image')) 488 .backgroundImageSize({ width: 1200, height: 160 }) 489 }.width('100%').margin({ top: 5 }) 490 } 491} 492``` 493 494 495 496### Example 6: Setting Text Blur Effects 497 498This example applies anamorphic blur effects on text using **blendMode** and **backgroundEffect**.<br> 499If 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. 500 501```ts 502// xxx.ets 503@Entry 504@Component 505struct Index { 506 @State shColor: Color = Color.White; 507 @State sizeDate: number = 20; 508 @State rVal: number = 255; 509 @State gVal: number = 255; 510 @State bVal: number = 255; 511 @State aVal: number = 0.1; 512 @State rad: number = 40; 513 @State satVal: number = 0.8; 514 @State briVal: number = 1.5; 515 build() { 516 Stack() { 517 Image($r('app.media.image')) 518 Column() { 519 Column({ space: 0 }) { 520 Column() { 521 Text('11') 522 .fontSize(144) 523 .fontWeight(FontWeight.Bold) 524 .fontColor('rgba(255,255,255,1)') 525 .fontFamily('HarmonyOS-Sans-Digit') 526 .maxLines(1) 527 .lineHeight(120 * 1.25) 528 .height(120 * 1.25) 529 .letterSpacing(4 * 1.25) 530 Text('42') 531 .fontSize(144) 532 .fontWeight(FontWeight.Bold) 533 .fontColor('rgba(255,255,255,1)') 534 .fontFamily('HarmonyOS-Sans-Digit') 535 .maxLines(1) 536 .lineHeight(120 * 1.25) 537 .height(120 * 1.25) 538 .letterSpacing(4 * 1.25) 539 .shadow({ 540 color: 'rgba(0,0,0,0)', 541 radius: 20, 542 offsetX: 0, 543 offsetY: 0 544 }) 545 Row() { 546 Text('October 16') 547 .fontSize(this.sizeDate) 548 .height(22) 549 .fontWeight('medium') 550 .fontColor('rgba(255,255,255,1)') 551 Text('Monday') 552 .fontSize(this.sizeDate) 553 .height(22) 554 .fontWeight('medium') 555 .fontColor('rgba(255,255,255,1)') 556 } 557 } 558 .blendMode(BlendMode.DST_IN, BlendApplyType.OFFSCREEN) 559 .pixelRound({ 560 start: PixelRoundCalcPolicy.FORCE_FLOOR , 561 top: PixelRoundCalcPolicy.FORCE_FLOOR , 562 end: PixelRoundCalcPolicy.FORCE_CEIL, 563 bottom: PixelRoundCalcPolicy.FORCE_CEIL 564 }) 565 } 566 .blendMode(BlendMode.SRC_OVER, BlendApplyType.OFFSCREEN) 567 .backgroundEffect({ 568 radius: this.rad, 569 saturation: this.satVal, 570 brightness: this.briVal, 571 color: this.getVolumeDialogWindowColor() 572 }) 573 .justifyContent(FlexAlign.Center) 574 .pixelRound({ 575 start: PixelRoundCalcPolicy.FORCE_FLOOR , 576 top: PixelRoundCalcPolicy.FORCE_FLOOR , 577 end: PixelRoundCalcPolicy.FORCE_CEIL, 578 bottom: PixelRoundCalcPolicy.FORCE_CEIL 579 }) 580 } 581 } 582 } 583 getVolumeDialogWindowColor(): ResourceColor | string { 584 return `rgba(${this.rVal.toFixed(0)}, ${this.gVal.toFixed(0)}, ${this.bVal.toFixed(0)}, ${this.aVal.toFixed(0)})`; 585 } 586} 587``` 588 589 590 591### Example 7: Comparing Blur Effects 592 593This example compares three different blur effects: **backgroundEffect**, **backDropBlur**, and **backgroundBlurStyle**. 594 595```ts 596// xxx.ets 597@Entry 598@Component 599struct BackGroundBlur { 600 private imageSize: number = 150; 601 602 build() { 603 Column({ space: 5 }) { 604 // Use backgroundBlurStyle with an enum value to set blur parameters. 605 Stack() { 606 Image($r('app.media.test')) 607 .width(this.imageSize) 608 .height(this.imageSize) 609 Column() 610 .width(this.imageSize) 611 .height(this.imageSize) 612 .backgroundBlurStyle(BlurStyle.Thin) 613 } 614 615 // backgroundEffect allows for custom settings for blur radius, brightness, saturation, and more. 616 Stack() { 617 Image($r('app.media.test')) 618 .width(this.imageSize) 619 .height(this.imageSize) 620 Column() 621 .width(this.imageSize) 622 .height(this.imageSize) 623 .backgroundEffect({ radius: 20, brightness: 0.6, saturation: 15 }) 624 } 625 626 // backdropBlur only sets blur radius and grayscale parameters. 627 Stack() { 628 Image($r('app.media.test')) 629 .width(this.imageSize) 630 .height(this.imageSize) 631 Column() 632 .width(this.imageSize) 633 .height(this.imageSize) 634 .backdropBlur(20, { grayscale: [30, 50] }) 635 } 636 } 637 .width('100%') 638 .padding({ top: 5 }) 639 } 640} 641``` 642 643 644
