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](#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](#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## BlurStyleActivePolicy<sup>14+</sup> 243 244**Atomic service API**: This API can be used in atomic services since API version 14. 245 246**System capability**: SystemCapability.ArkUI.ArkUI.Full 247 248| Name | Value|Description | 249| ------ | ----------------------------- |----------------------------- | 250| 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.| 251| ALWAYS_ACTIVE | 1|The blur effect is always active.| 252| ALWAYS_INACTIVE |2 |The blur effect is always inactive.| 253 254## backgroundBrightness<sup>12+</sup> 255 256backgroundBrightness(params: BackgroundBrightnessOptions) 257 258Sets the background brightness of the component. 259 260**Atomic service API**: This API can be used in atomic services since API version 12. 261 262**System capability**: SystemCapability.ArkUI.ArkUI.Full 263 264**Parameters** 265 266| Name| Type | Mandatory| Description | 267| ------ | ------------------------------------------------------------ | ---- | ---------------------------------------------------- | 268| params | [BackgroundBrightnessOptions](#backgroundbrightnessoptions12) | Yes | Parameters for setting the background brightness.| 269 270## BackgroundBrightnessOptions<sup>12+</sup> 271 272**Atomic service API**: This API can be used in atomic services since API version 12. 273 274**System capability**: SystemCapability.ArkUI.ArkUI.Full 275 276| Name | Type | Mandatory| Description | 277| ------------- | ------ | ---- | ------------------------------------------------------------ | 278| 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, +∞)| 279| 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]| 280 281> **NOTE** 282> 283> The brightness (gray scale value) of each pixel in the component background content is calculated using the following formula: 284> 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. 285> 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. 286 287## Example 288 289### Example 1: Setting Basic Background Styles 290 291This example shows how to configure basic background styles by setting **backgroundColor**, **backgroundImage**, **backgroundImageSize**, and **backgroundImagePosition**. 292 293```ts 294// xxx.ets 295@Entry 296@Component 297struct BackgroundExample { 298 299 build() { 300 Column({ space: 5 }) { 301 Text('background color').fontSize(9).width('90%').fontColor(0xCCCCCC) 302 Row().width('90%').height(50).backgroundColor(0xE5E5E5).border({ width: 1 }) 303 304 Text('background image repeat along X').fontSize(9).width('90%').fontColor(0xCCCCCC) 305 Row() 306 .backgroundImage('/comment/bg.jpg', ImageRepeat.X) 307 .backgroundImageSize({ width: '250px', height: '140px' }) 308 .width('90%') 309 .height(70) 310 .border({ width: 1 }) 311 312 Text('background image repeat along Y').fontSize(9).width('90%').fontColor(0xCCCCCC) 313 Row() 314 .backgroundImage('/comment/bg.jpg', ImageRepeat.Y) 315 .backgroundImageSize({ width: '500px', height: '120px' }) 316 .width('90%') 317 .height(100) 318 .border({ width: 1 }) 319 320 Text('background image size').fontSize(9).width('90%').fontColor(0xCCCCCC) 321 Row() 322 .width('90%').height(150) 323 .backgroundImage('/comment/bg.jpg', ImageRepeat.NoRepeat) 324 .backgroundImageSize({ width: 1000, height: 500 }) 325 .border({ width: 1 }) 326 327 Text('background fill the box(Cover)').fontSize(9).width('90%').fontColor(0xCCCCCC) 328 // Occupy all the space of the container, without ensuring that the image is completely displayed. 329 Row() 330 .width(200) 331 .height(50) 332 .backgroundImage('/comment/bg.jpg', ImageRepeat.NoRepeat) 333 .backgroundImageSize(ImageSize.Cover) 334 .border({ width: 1 }) 335 336 Text('background fill the box(Contain)').fontSize(9).width('90%').fontColor(0xCCCCCC) 337 // Maximize the image while ensuring that it can be completely displayed. 338 Row() 339 .width(200) 340 .height(50) 341 .backgroundImage('/comment/bg.jpg', ImageRepeat.NoRepeat) 342 .backgroundImageSize(ImageSize.Contain) 343 .border({ width: 1 }) 344 345 Text('background image position').fontSize(9).width('90%').fontColor(0xCCCCCC) 346 Row() 347 .width(100) 348 .height(50) 349 .backgroundImage('/comment/bg.jpg', ImageRepeat.NoRepeat) 350 .backgroundImageSize({ width: 1000, height: 560 }) 351 .backgroundImagePosition({ x: -500, y: -300 }) 352 .border({ width: 1 }) 353 } 354 .width('100%').height('100%').padding({ top: 5 }) 355 } 356} 357``` 358 359 360 361### Example 2: Setting the Background Blur Style 362 363This example sets the background blur style using **backgroundBlurStyle**. 364 365```ts 366// xxx.ets 367@Entry 368@Component 369struct BackgroundBlurStyleDemo { 370 build() { 371 Column() { 372 Row() { 373 Text("Thin Material") 374 } 375 .width('50%') 376 .height('50%') 377 .backgroundBlurStyle(BlurStyle.Thin, { colorMode: ThemeColorMode.LIGHT, adaptiveColor: AdaptiveColor.DEFAULT, scale: 1.0 }) 378 .position({ x: '15%', y: '30%' }) 379 } 380 .height('100%') 381 .width('100%') 382 .backgroundImage($r('app.media.bg')) 383 .backgroundImageSize(ImageSize.Cover) 384 } 385} 386``` 387 388 389 390### Example 3: Setting the Component Background 391 392This example sets the component background using **background**. 393 394```ts 395// xxx.ets 396@Entry 397@Component 398struct BackgroundExample { 399 @Builder renderBackground() { 400 Column() { 401 Progress({value : 50}) 402 } 403 } 404 405 build() { 406 Column() { 407 Text("content") 408 .width(100) 409 .height(40) 410 .fontColor("#FFF") 411 .position({x:50, y:80}) 412 .textAlign(TextAlign.Center) 413 .backgroundColor(Color.Green) 414 } 415 .width(200).height(200) 416 .background(this.renderBackground) 417 .backgroundColor(Color.Gray) 418 } 419} 420``` 421 422 423 424### Example 4: Setting Component Background Brightness 425 426This example sets the component background brightness using **backgroundBrightness**. 427 428```ts 429// xxx.ets 430@Entry 431@Component 432struct BackgroundBrightnessDemo { 433 build() { 434 Column() { 435 Row() { 436 Text("BackgroundBrightness") 437 } 438 .width(200) 439 .height(100) 440 .position({ x: 100, y: 100 }) 441 .backgroundBlurStyle(BlurStyle.Thin, { colorMode: ThemeColorMode.LIGHT, adaptiveColor: AdaptiveColor.DEFAULT}) 442 .backgroundBrightness({rate:0.5,lightUpDegree:0.5}) // Background brightness 443 } 444 .width('100%') 445 .height('100%') 446 .backgroundImage($r('app.media.image')) 447 .backgroundImageSize(ImageSize.Cover) 448 } 449} 450``` 451 452The following figures show how the component looks with the background brightness set. 453 454When **rate** and **lightUpDegree** are both set to **0.5** 455 456 457 458When **rate** is set to **0.5** and **lightUpDegree** **-0.1** 459 460 461 462The following figure shows how the component looks without the background brightness set. 463 464 465 466### Example 5: Setting Blur Effects 467 468This example shows how to use **blur** to apply a foreground blur effect and **backdropBlur** to apply a background blur effect. 469 470```ts 471// xxx.ets 472@Entry 473@Component 474struct BlurEffectsExample { 475 build() { 476 Column({ space: 10 }) { 477 // Blur the font. 478 Text('font blur').fontSize(15).fontColor(0xCCCCCC).width('90%') 479 Flex({ alignItems: ItemAlign.Center }) { 480 Text('original text').margin(10) 481 Text('blur text') 482 .blur(5).margin(10) 483 Text('blur text') 484 .blur(10).margin(10) 485 Text('blur text') 486 .blur(15).margin(10) 487 }.width('90%').height(40) 488 .backgroundColor(0xF9CF93) 489 490 491 // Blur the background. 492 Text('backdropBlur').fontSize(15).fontColor(0xCCCCCC).width('90%') 493 Text() 494 .width('90%') 495 .height(40) 496 .fontSize(16) 497 .backdropBlur(3) 498 .backgroundImage($r('app.media.image')) 499 .backgroundImageSize({ width: 1200, height: 160 }) 500 }.width('100%').margin({ top: 5 }) 501 } 502} 503``` 504 505 506 507### Example 6: Setting Text Blur Effects 508 509This example applies anamorphic blur effects on text using **blendMode** and **backgroundEffect**.<br> 510If 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. 511 512```ts 513// xxx.ets 514@Entry 515@Component 516struct Index { 517 @State shColor: Color = Color.White; 518 @State sizeDate: number = 20; 519 @State rVal: number = 255; 520 @State gVal: number = 255; 521 @State bVal: number = 255; 522 @State aVal: number = 0.1; 523 @State rad: number = 40; 524 @State satVal: number = 0.8; 525 @State briVal: number = 1.5; 526 build() { 527 Stack() { 528 Image($r('app.media.image')) 529 Column() { 530 Column({ space: 0 }) { 531 Column() { 532 Text('11') 533 .fontSize(144) 534 .fontWeight(FontWeight.Bold) 535 .fontColor('rgba(255,255,255,1)') 536 .fontFamily('HarmonyOS-Sans-Digit') 537 .maxLines(1) 538 .lineHeight(120 * 1.25) 539 .height(120 * 1.25) 540 .letterSpacing(4 * 1.25) 541 Text('42') 542 .fontSize(144) 543 .fontWeight(FontWeight.Bold) 544 .fontColor('rgba(255,255,255,1)') 545 .fontFamily('HarmonyOS-Sans-Digit') 546 .maxLines(1) 547 .lineHeight(120 * 1.25) 548 .height(120 * 1.25) 549 .letterSpacing(4 * 1.25) 550 .shadow({ 551 color: 'rgba(0,0,0,0)', 552 radius: 20, 553 offsetX: 0, 554 offsetY: 0 555 }) 556 Row() { 557 Text('October 16') 558 .fontSize(this.sizeDate) 559 .height(22) 560 .fontWeight('medium') 561 .fontColor('rgba(255,255,255,1)') 562 Text('Monday') 563 .fontSize(this.sizeDate) 564 .height(22) 565 .fontWeight('medium') 566 .fontColor('rgba(255,255,255,1)') 567 } 568 } 569 .blendMode(BlendMode.DST_IN, BlendApplyType.OFFSCREEN) 570 .pixelRound({ 571 start: PixelRoundCalcPolicy.FORCE_FLOOR , 572 top: PixelRoundCalcPolicy.FORCE_FLOOR , 573 end: PixelRoundCalcPolicy.FORCE_CEIL, 574 bottom: PixelRoundCalcPolicy.FORCE_CEIL 575 }) 576 } 577 .blendMode(BlendMode.SRC_OVER, BlendApplyType.OFFSCREEN) 578 .backgroundEffect({ 579 radius: this.rad, 580 saturation: this.satVal, 581 brightness: this.briVal, 582 color: this.getVolumeDialogWindowColor() 583 }) 584 .justifyContent(FlexAlign.Center) 585 .pixelRound({ 586 start: PixelRoundCalcPolicy.FORCE_FLOOR , 587 top: PixelRoundCalcPolicy.FORCE_FLOOR , 588 end: PixelRoundCalcPolicy.FORCE_CEIL, 589 bottom: PixelRoundCalcPolicy.FORCE_CEIL 590 }) 591 } 592 } 593 } 594 getVolumeDialogWindowColor(): ResourceColor | string { 595 return `rgba(${this.rVal.toFixed(0)}, ${this.gVal.toFixed(0)}, ${this.bVal.toFixed(0)}, ${this.aVal.toFixed(0)})`; 596 } 597} 598``` 599 600 601 602### Example 7: Comparing Blur Effects 603 604This example compares three different blur effects: **backgroundEffect**, **backDropBlur**, and **backgroundBlurStyle**. 605 606```ts 607// xxx.ets 608@Entry 609@Component 610struct BackGroundBlur { 611 private imageSize: number = 150; 612 613 build() { 614 Column({ space: 5 }) { 615 // Use backgroundBlurStyle with an enum value to set blur parameters. 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 .backgroundBlurStyle(BlurStyle.Thin) 624 } 625 626 // backgroundEffect allows for custom settings for blur radius, brightness, saturation, and more. 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 .backgroundEffect({ radius: 20, brightness: 0.6, saturation: 15 }) 635 } 636 637 // backdropBlur only sets blur radius and grayscale parameters. 638 Stack() { 639 Image($r('app.media.test')) 640 .width(this.imageSize) 641 .height(this.imageSize) 642 Column() 643 .width(this.imageSize) 644 .height(this.imageSize) 645 .backdropBlur(20, { grayscale: [30, 50] }) 646 } 647 } 648 .width('100%') 649 .padding({ top: 5 }) 650 } 651} 652``` 653 654 655
