• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# Foreground Blur
2
3You can apply foreground blur effects to a component.
4
5>  **NOTE**
6>
7>  This attribute is supported since API version 10. Updates will be marked with a superscript to indicate their earliest API version.
8
9## foregroundBlurStyle
10
11foregroundBlurStyle(value: BlurStyle, options?: ForegroundBlurStyleOptions)
12
13Applies a foreground blur style to the component.
14
15**System capability**: SystemCapability.ArkUI.ArkUI.Full
16
17**Parameters**
18
19| Name | Type                                                        | Mandatory| Description                                                        |
20| ------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ |
21| value   | [BlurStyle](ts-appendix-enums.md#blurstyle9)                 | Yes  | Settings of the foreground blur style, including the blur radius, mask color, mask opacity, saturation, and brightness.|
22| options | [ForegroundBlurStyleOptions](#foregroundblurstyleoptions) | No  | Foreground blur options.                                    |
23
24## ForegroundBlurStyleOptions
25Inherited from [BlurStyleOptions](#blurstyleoptions).
26
27## BlurStyleOptions
28
29| Name                       | Type                                               | Mandatory| Description                                                        |
30| --------------------------- | ------------------------------------------------------- | ---- | ------------------------------------------------------------ |
31| colorMode     | [ThemeColorMode](ts-appendix-enums.md#themecolormode10) | No  | Color mode used for the foreground blur.<br>Default value: **ThemeColorMode.System**|
32| adaptiveColor | [AdaptiveColor](ts-appendix-enums.md#adaptivecolor10)   | No  | Adaptive color mode.<br>Default value: **AdaptiveColor.Default**|
33| scale | number   | No  | Foreground blur scale. This API is a system API.<br>Default value: **1.0**<br>Value range: [0.0, 1.0]<br>|
34| blurOptions<sup>11+</sup> | [BlurOptions](ts-appendix-enums.md#bluroptions11)         | No   | Grayscale blur parameters.          |
35
36
37
38
39## Example
40
41```ts
42// xxx.ets
43@Entry
44@Component
45struct ForegroundBlurStyleDemo {
46  build() {
47    Column() {
48      Text('Thin Material').fontSize(30).fontColor(0xCCCCCC)
49      Image($r('app.media.bg'))
50        .width(300)
51        .height(350)
52        .foregroundBlurStyle(BlurStyle.Thin, { colorMode: ThemeColorMode.LIGHT, adaptiveColor: AdaptiveColor.DEFAULT, scale: 1.0 })
53    }
54    .height('100%')
55    .width('100%')
56  }
57}
58```
59
60![en-us_image_background_blur_style](figures/en-us_image_foreground_blur_style.png)
61