背景設置

設置組件的背景樣式。

說明：
開發前請熟悉鴻蒙開發指導文檔 ：[gitee.com/li-shizhen-skin/harmony-os/blob/master/README.md]
從API Version 7開始支持。后續版本如有新增內容，則采用上角標單獨標記該內容的起始版本。

屬性

名稱	參數類型	描述
background10+	builder: [CustomBuilder], options?: {align?:[Alignment]}	builder：自定義背景。 align：設置自定義背景與組件的對齊方式。同時設置了background，backgroundColor，backgroundImage時，疊加顯示，background在最上層。說明：自定義背景渲染會有一定延遲，不能響應事件，不能進行動態更新。該屬性不支持嵌套使用，不支持預覽器預覽。
backgroundColor	[ResourceColor]	設置組件的背景色。從API version 9開始，該接口支持在ArkTS卡片中使用。
backgroundImage	src: [ResourceStr], repeat?: [ImageRepeat]	src：圖片地址，支持網絡圖片資源地址和本地圖片資源地址和Base64，不支持svg類型的圖片。 repeat：設置背景圖片的重復樣式，默認不重復。當設置的背景圖片為透明底色圖片，且同時設置了backgroundColor時，二者疊加顯示，背景顏色在最底部。從API version 9開始，該接口支持在ArkTS卡片中使用。
backgroundImageSize	{ width?: [Length], height?: [Length] }	[ImageSize]
backgroundImagePosition	[Position]	[Alignment]
backgroundBlurStyle9+	value:[BlurStyle], options10+?:[BackgroundBlurStyleOptions]	為當前組件提供一種在背景和內容之間的模糊能力。 value: 背景模糊樣式。模糊樣式中封裝了模糊半徑、蒙版顏色、蒙版透明度、飽和度、亮度五個參數。 options: 可選參數，背景模糊選項。該接口支持在ArkTS卡片中使用。

BackgroundBlurStyleOptions10+對象說明

名稱	參數類型	必填	描述
colorMode	[ThemeColorMode]	否	背景模糊效果使用的深淺色模式。默認值：ThemeColorMode.System
adaptiveColor	[AdaptiveColor]	否	背景模糊效果使用的取色模式。默認值：AdaptiveColor.Default
scale	number	否	背景材質模糊效果程度。此參數為系統接口。默認值：1.0 取值范圍：[0.0, 1.0]

示例

示例1

// xxx.ets
@Entry
@Component
struct BackgroundExample {

  build() {
    Column({ space: 5 }) {
      Text('background color').fontSize(9).width('90%').fontColor(0xCCCCCC)
      Row().width('90%').height(50).backgroundColor(0xE5E5E5).border({ width: 1 })

      Text('background image repeat along X').fontSize(9).width('90%').fontColor(0xCCCCCC)
      Row()
        .backgroundImage('/comment/bg.jpg', ImageRepeat.X)
        .backgroundImageSize({ width: '250px', height: '140px' })
        .width('90%')
        .height(70)
        .border({ width: 1 })

      Text('background image repeat along Y').fontSize(9).width('90%').fontColor(0xCCCCCC)
      Row()
        .backgroundImage('/comment/bg.jpg', ImageRepeat.Y)
        .backgroundImageSize({ width: '500px', height: '120px' })
        .width('90%')
        .height(100)
        .border({ width: 1 })

      Text('background image size').fontSize(9).width('90%').fontColor(0xCCCCCC)
      Row()
        .width('90%').height(150)
        .backgroundImage('/comment/bg.jpg', ImageRepeat.NoRepeat)
        .backgroundImageSize({ width: 1000, height: 500 })
        .border({ width: 1 })

      Text('background fill the box(Cover)').fontSize(9).width('90%').fontColor(0xCCCCCC)
      // 不保準圖片完整的情況下占滿盒子
      Row()
        .width(200)
        .height(50)
        .backgroundImage('/comment/bg.jpg', ImageRepeat.NoRepeat)
        .backgroundImageSize(ImageSize.Cover)
        .border({ width: 1 })

      Text('background fill the box(Contain)').fontSize(9).width('90%').fontColor(0xCCCCCC)
      // 保準圖片完整的情況下放到最大
      Row()
        .width(200)
        .height(50)
        .backgroundImage('/comment/bg.jpg', ImageRepeat.NoRepeat)
        .backgroundImageSize(ImageSize.Contain)
        .border({ width: 1 })

      Text('background image position').fontSize(9).width('90%').fontColor(0xCCCCCC)
      Row()
        .width(100)
        .height(50)
        .backgroundImage('/comment/bg.jpg', ImageRepeat.NoRepeat)
        .backgroundImageSize({ width: 1000, height: 560 })
        .backgroundImagePosition({ x: -500, y: -300 })
        .border({ width: 1 })
    }
    .width('100%').height('100%').padding({ top: 5 })
  }
}

zh-cn_image_0000001219982703

示例2

// xxx.ets
@Entry
@Component
struct BackgroundBlurStyleDemo {
  build() {
    Column() {
      Row() {
        Text("Thin Material")
      }
      .width('50%')
      .height('50%')
      .backgroundBlurStyle(BlurStyle.Thin, { colorMode: ThemeColorMode.LIGHT, adaptiveColor: AdaptiveColor.DEFAULT, scale: 1.0 })
      .position({ x: '15%', y: '30%' })
    }
    .height('100%')
    .width('100%')
    .backgroundImage($r('app.media.bg'))
    .backgroundImageSize(ImageSize.Cover)
  }
}

zh-cn_image_background_blur_style

示例3

搜狗高速瀏覽器截圖20240326151450.png

`HarmonyOS與OpenHarmony鴻蒙文檔籽料：mau123789是v直接拿`

// xxx.ets
@Entry
@Component
struct BackgroundExample {
  @Builder renderBackground() {
    Column() {
      Progress({value : 50})
    }
  }

  build() {
    Column() {
      Text("content")
        .width(100)
        .height(40)
        .fontColor("#FFF")
        .position({x:50, y:80})
        .textAlign(TextAlign.Center)
        .backgroundColor(Color.Green)
    }
    .width(200).height(200)
    .background(this.renderBackground)
    .backgroundColor(Color.Gray)
  }
}