1# 前景属性设置
2
3设置组件的前景属性。
4
5>  **说明：**
6>
7>  从API Version 12开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
8
9## foregroundEffect
10
11foregroundEffect(options: ForegroundEffectOptions)
12
13设置组件的前景属性。
14
15**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。
16
17**系统能力：** SystemCapability.ArkUI.ArkUI.Full
18
19**参数：**
20
21| 参数名 | 类型                                                         | 必填 | 说明                                                 |
22| ------ | ------------------------------------------------------------ | ---- | ---------------------------------------------------- |
23| options | [ForegroundEffectOptions](#foregroundeffectoptions12) | 是   | 设置组件前景属性包括：模糊半径。 |
24
25## ForegroundEffectOptions<sup>12+</sup>
26前景效果参数。
27
28**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。
29
30**系统能力：** SystemCapability.ArkUI.ArkUI.Full
31
32| 名称        |   类型         |   必填 |  说明                        |
33| ----         |  ----         |   ---- | --------------------------  |
34| radius       | number        |   是   |   模糊半径，取值范围：[0, +∞)，默认为0。<br/> 仅在组件范围内生效，与其他接口连用时超出组件范围的效果无法生效。     |
35
36## 示例
37
38该示例主要演示通过foregroundEffect接口设置前景属性。
39
40```ts
41// xxx.ets
42@Entry
43@Component
44struct Index {
45  build() {
46    Row() {
47      Image($r('app.media.icon'))
48          .width(100)
49          .height(100)
50          .foregroundEffect({ radius: 20 })
51    }
52    .width('100%')
53    .height('100%')
54    .justifyContent(FlexAlign.Center)
55  }
56}
57```
58
59效果图如下：
60radius表示模糊半径，数值越大越模糊
61
62![foregroundColor_circle](figures/foregroundEffect.jpg)
63