diff --git a/zh-cn/application-dev/reference/arkui-ts/Readme-CN.md b/zh-cn/application-dev/reference/arkui-ts/Readme-CN.md index 8fd364541585acd19e53464a98d25a675b889425..f6edaf999cfa1eec90e9d70fe48df746ff29bf02 100644 --- a/zh-cn/application-dev/reference/arkui-ts/Readme-CN.md +++ b/zh-cn/application-dev/reference/arkui-ts/Readme-CN.md @@ -39,6 +39,7 @@ - [触摸热区设置](ts-universal-attributes-touch-target.md) - [多态样式](ts-universal-attributes-polymorphic-style.md) - [触摸测试控制](ts-universal-attributes-hit-test-behavior.md) + - [背景模糊设置](ts-universal-attributes-backgroundBlurStyle.md) - 手势处理 - [绑定手势方法](ts-gesture-settings.md) - 基础手势 diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_background_blur_style.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_background_blur_style.png new file mode 100644 index 0000000000000000000000000000000000000000..e9a7b0e3baa6d48739c2a3cfbc7b5b46600f9c70 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_background_blur_style.png differ diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-backgroundBlurStyle.md b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-backgroundBlurStyle.md new file mode 100644 index 0000000000000000000000000000000000000000..e991966730345ad8576144f5ba34946ac8c9f1c7 --- /dev/null +++ b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-backgroundBlurStyle.md @@ -0,0 +1,53 @@ +# 组件背景模糊 + +为当前组件添加背景模糊效果。 + +> **说明:** +> +>从API Version 9开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。 + +## 权限列表 + +无 + +## 属性 + +| 名称 | 参数类型 | 默认值 | 描述 | +| ------------ | ------------- | ----------------------- | ------------------------ | +| backgroundBlurStyle | [BlurStyle](#blurstyle) | - | 为当前组件提供一种在背景和内容之间的模糊能力,入参为模糊材质。 + +## BlurStyle + + | 名称 | 描述 | + | ------ | ----------------------------------------------- | + | Thin | 轻薄材质。 | + | Regular | 普通厚度材质。 | + | Thick | 厚材质。 | + + + +## 示例 + +```ts +// xxx.ets +@Entry +@Component + +struct Index { + build() { + Column() { + Row() { + Text("Thin Material") + } + .width(350) + .height(300) + .backgroundBlurStyle(BlurStyle.Thin) + .position({x: "15%", y: "30%"}) + } + .height('100%') + .width('100%') + .backgroundImage($r('app.media.bg')) + .backgroundImageSize(ImageSize.Cover) + } +``` +![zh-cn_image_background_blur_style](figures/zh-cn_image_background_blur_style.png) \ No newline at end of file