1# 组件内容模糊 2 3为当前组件添加内容模糊效果。 4 5> **说明：** 6> 7> 从API Version 10开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 8 9## foregroundBlurStyle 10 11foregroundBlurStyle(value: BlurStyle, options?: ForegroundBlurStyleOptions) 12 13为当前组件提供内容模糊能力。 14 15**系统能力：** SystemCapability.ArkUI.ArkUI.Full 16 17**参数：** 18 19| 参数名 | 类型 | 必填 | 说明 | 20| ------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 21| value | [BlurStyle](ts-appendix-enums.md#blurstyle9) | 是 | 内容模糊样式。模糊样式由模糊半径、蒙版颜色、蒙版透明度、饱和度、亮度五个参数组成。 | 22| options | [ForegroundBlurStyleOptions](#foregroundblurstyleoptions对象说明) | 否 | 可选参数，内容模糊选项。 | 23 24## ForegroundBlurStyleOptions对象说明 25继承自[BlurStyleOptions](#blurstyleoptions) 26 27## BlurStyleOptions 28 29| 名称 | 参数类型 | 必填 | 描述 | 30| --------------------------- | ------------------------------------------------------- | ---- | ------------------------------------------------------------ | 31| colorMode | [ThemeColorMode](ts-appendix-enums.md#themecolormode10) | 否 | 内容模糊效果使用的深浅色模式。<br/>默认值：ThemeColorMode.System | 32| adaptiveColor | [AdaptiveColor](ts-appendix-enums.md#adaptivecolor10) | 否 | 内容模糊效果使用的取色模式。<br/>默认值：AdaptiveColor.Default | 33| blurOptions<sup>11+</sup> | [BlurOptions](ts-appendix-enums.md#bluroptions11) | 否 | 灰阶模糊参数。 | 34 35 36 37 38## 示例 39 40```ts 41// xxx.ets 42@Entry 43@Component 44struct ForegroundBlurStyleDemo { 45 build() { 46 Column() { 47 Text('Thin Material').fontSize(30).fontColor(0xCCCCCC) 48 Image($r('app.media.bg')) 49 .width(300) 50 .height(350) 51 .foregroundBlurStyle(BlurStyle.Thin, { colorMode: ThemeColorMode.LIGHT, adaptiveColor: AdaptiveColor.DEFAULT, scale: 1.0 }) 52 } 53 .height('100%') 54 .width('100%') 55 } 56} 57``` 58 59
