• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# 组件背景模糊
2
3为当前组件添加背景模糊效果。
4
5>  **说明：**
6>
7>  从API Version 9开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
8>
9>  此接口为系统接口。
10
11## 属性
12
13| 名称                  | 参数类型                     | 描述                     |
14| -------------------- | ----------------------- | ------------------------ |
15| backgroundBlurStyle  | [BlurStyle](#blurstyle) | 为当前组件提供一种在背景和内容之间的模糊能力，入参为模糊材质。<br/>该接口支持在ArkTS卡片中使用。 |
16
17## BlurStyle
18
19该接口支持在ArkTS卡片中使用。
20
21  | 名称       | 描述      |
22  | ------- | ---------- |
23  | Thin    | 轻薄材质。     |
24  | Regular | 普通厚度材质。  |
25  | Thick   | 厚材质。       |
26
27## 示例
28
29```ts
30// xxx.ets
31@Entry
32@Component
33struct Index {
34  build() {
35    Column() {
36      Row() {
37        Text("Thin Material")
38      }
39      .width(350)
40      .height(300)
41      .backgroundBlurStyle(BlurStyle.Thin)
42      .position({ x: "15%", y: "30%" })
43    }
44    .height('100%')
45    .width('100%')
46    .backgroundImage($r('app.media.bg'))
47    .backgroundImageSize(ImageSize.Cover)
48  }
49}
50```
51![zh-cn_image_background_blur_style](figures/zh-cn_image_background_blur_style.png)