Foreground Blur
You can apply foreground blur effects to a component.
NOTE
This attribute is supported since API version 10. Updates will be marked with a superscript to indicate their earliest API version.
foregroundBlurStyle
foregroundBlurStyle(value: BlurStyle, options?: ForegroundBlurStyleOptions)
Applies a foreground blur style to the component.
System capability: SystemCapability.ArkUI.ArkUI.Full
Parameters
| Name | Type | Mandatory | Description |
|---|---|---|---|
| value | BlurStyle | Yes | Settings of the foreground blur style, including the blur radius, mask color, mask opacity, saturation, and brightness. |
| options | ForegroundBlurStyleOptions | No | Foreground blur options. |
ForegroundBlurStyleOptions
Inherited from BlurStyleOptions.
BlurStyleOptions
| Name | Type | Mandatory | Description |
|---|---|---|---|
| colorMode | ThemeColorMode | No | Color mode used for the foreground blur. Default value: ThemeColorMode.System |
| adaptiveColor | AdaptiveColor | No | Adaptive color mode. Default value: AdaptiveColor.Default |
| blurOptions11+ | BlurOptions | No | Grayscale blur parameters. |
Example
// xxx.ets
@Entry
@Component
struct ForegroundBlurStyleDemo {
build() {
Column() {
Text('Thin Material').fontSize(30).fontColor(0xCCCCCC)
Image($r('app.media.bg'))
.width(300)
.height(350)
.foregroundBlurStyle(BlurStyle.Thin, { colorMode: ThemeColorMode.LIGHT, adaptiveColor: AdaptiveColor.DEFAULT, scale: 1.0 })
}
.height('100%')
.width('100%')
}
}
