• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# Background Blur
2
3You can apply background blur effects to a component.
4
5>  **NOTE**
6>
7>  The APIs of this module are supported since API version 9. Updates will be marked with a superscript to indicate their earliest API version.
8>
9>  The APIs provided by this module are system APIs.
10
11## Attributes
12
13| Name                 | Type                    | Description                    |
14| -------------------- | ----------------------- | ------------------------ |
15| backgroundBlurStyle  | [BlurStyle](#blurstyle) | Style of the blur between the background and content for the current component. The input parameter indicates a blur material.<br>This API is supported in ArkTS widgets.|
16
17## BlurStyle
18
19This API is supported in ArkTS widgets.
20
21  | Name      | Description     |
22  | ------- | ---------- |
23  | Thin    | Thin material.    |
24  | Regular | Regular material. |
25  | Thick   | Thick material.      |
26
27## Example
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![en-us_image_background_blur_style](figures/en-us_image_background_blur_style.png)
52