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**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| value | [BlurStyle](ts-universal-attributes-background.md#blurstyle9) | Yes | Settings of the foreground blur style. | 24| options | [ForegroundBlurStyleOptions](#foregroundblurstyleoptions) | No | Foreground blur options.| 25 26## foregroundBlurStyle<sup>18+</sup> 27 28foregroundBlurStyle(style: Optional\<BlurStyle>, options?: ForegroundBlurStyleOptions, sysOptions?: [SystemAdaptiveOptions](ts-universal-attributes-background.md#systemadaptiveoptions18)) 29 30Applies a foreground blur style to the component. Compared to [foregroundBlurStyle](#foregroundblurstyle), this API supports the **undefined** type for the **style** parameter. 31 32**Atomic service API**: This API can be used in atomic services since API version 18. 33 34**System capability**: SystemCapability.ArkUI.ArkUI.Full 35 36**Parameters** 37 38| Name | Type | Mandatory| Description | 39| ------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 40| style | Optional\<[BlurStyle](ts-universal-attributes-background.md#blurstyle9)> | Yes | Settings of the foreground blur style,<br>If **style** is set to **undefined**, no blur is applied.| 41| options | [ForegroundBlurStyleOptions](#foregroundblurstyleoptions) | No | Foreground blur options. | 42| sysOptions<sup>18+</sup> | [SystemAdaptiveOptions](ts-universal-attributes-background.md#systemadaptiveoptions18) | No | System adaptive adjustment options.<br>Default value: **{ disableSystemAdaptation: false }** | 43 44## ForegroundBlurStyleOptions 45Inherited from [BlurStyleOptions](#blurstyleoptions). 46 47**Atomic service API**: This API can be used in atomic services since API version 12. 48 49## BlurStyleOptions 50 51Defines the background blur options. 52 53| Name | Type | Mandatory| Description | 54| --------------------------- | ------------------------------------------------------- | ---- | ------------------------------------------------------------ | 55| colorMode | [ThemeColorMode](ts-container-with-theme.md#themecolormode10) | No | Color mode used for the foreground blur.<br>Default value: **ThemeColorMode.SYSTEM**<br>**Atomic service API**: This API can be used in atomic services since API version 11.| 56| adaptiveColor | [AdaptiveColor](#adaptivecolor10) | No | Adaptive color mode.<br>Default value: **AdaptiveColor.DEFAULT**<br>**Atomic service API**: This API can be used in atomic services since API version 11.| 57| blurOptions<sup>11+</sup> | [BlurOptions](#bluroptions11) | No | Grayscale blur parameters.<br>Default value: **grayscale: [0,0]**<br>**Atomic service API**: This API can be used in atomic services since API version 12.| 58| scale<sup>12+</sup> | number | No | Foreground blur scale.<br>Default value: **1.0**<br>Value range: [0.0, 1.0]<br>**Atomic service API**: This API can be used in atomic services since API version 12.| 59 60## AdaptiveColor<sup>10+</sup> 61 62Enumerates the adaptive color modes used for the background blur effect. 63 64**Atomic service API**: This API can be used in atomic services since API version 11. 65 66**System capability**: SystemCapability.ArkUI.ArkUI.Full 67 68| Name | Description | 69| ------- | ------------------------- | 70| DEFAULT | Adaptive color mode is not used. The default color is used as the mask color. Using a mode other than **DEFAULT** can be more time-consuming. | 71| AVERAGE | Adaptive color mode is used. The average color value of the color picking area is used as the mask color.| 72 73## BlurOptions<sup>11+</sup> 74Grayscale blur parameters. 75 76**Atomic service API**: This API can be used in atomic services since API version 12. 77 78**System capability**: SystemCapability.ArkUI.ArkUI.Full 79 80| Name | Type | Mandatory| Description | 81| ---- | ---- | ---- | -------------------------- | 82| grayscale | [number, number] | Yes | Grayscale blur, with two parameters in the value range of [0, 127]. The color gradation of the black and white in the image is adjusted to create different shades of gray. The first parameter indicates the brightness of the black color, and the second parameter indicates the darkness of the white color. A larger value indicates a more obvious adjustment effect (the black and white colors become grayer). For example, if the value specified is (20,20), the RGB value [0, 0, 0] (black) is converted to [20, 20, 20], RGB value [255, 255, 255] (white) is converted to [235, 235, 235] (255-20), and the color pixels remain unchanged.| 83 84 85## Example 86 87This example demonstrates how to apply content blur to an image using **foregroundBlurStyle**. 88 89```ts 90// xxx.ets 91@Entry 92@Component 93struct ForegroundBlurStyleDemo { 94 build() { 95 Column() { 96 Text('Thin Material').fontSize(30).fontColor(0xCCCCCC) 97 Image($r('app.media.bg')) 98 .width(300) 99 .height(350) 100 .foregroundBlurStyle(BlurStyle.Thin, 101 { colorMode: ThemeColorMode.LIGHT, adaptiveColor: AdaptiveColor.DEFAULT, scale: 1.0 }) 102 } 103 .height('100%') 104 .width('100%') 105 } 106} 107``` 108 109 110
