ArkTS 背景图片backgroundImage

设置背景图片.backgroundImage()

.backgroundImage(图片地址，是否平铺)   
ImageRepeat.NoRepeat（不平铺） 
ImageRepeat.x (水平平铺)
ImageRepeat.y （纵向平铺）
ImageRepeat.xy（全面平铺）

@Entry
@Component
struct Index {
  @State message: string = 'Hello World';
  build() {
    Column({space:20}){
      Text("背景图")
        .fontSize(70)
        .backgroundImage($r("app.media.XiShen"),ImageRepeat.NoRepeat)//图片路径，平铺方式
    }
    .width("100%")

  }
}

设置背景图位置.backgroundImagePosition()

.backgroundImagePosition(位置坐标或者枚举)

位置坐标

backgroundImagePosition({ x:坐标值,y:坐标值 }) //x,y为图片左顶点位置（坐标值单位与宽高单位不同）

宽高使用vp虚拟像素单位，保证在不同设备的视觉一致，开发中建议都使用vp，因为vp会根据设备显示能力自动进行转换

背景定位使用的px实际物理像素点，分辨率单位

使用vp2px（）将vp转换得到px解决

@Entry
@Component
struct Index {
  @State message: string = 'Hello World';
  build() {
    Column({space:20}){
      Text("背景定位")
        .fontSize(70)
        .height(200)
        .width(200)
        .backgroundColor(Color.Pink)
        .backgroundImage($r("app.media.XiShen"),ImageRepeat.NoRepeat)//图片路径，平铺方式
        /**
         * 坐标值单位与宽高单位不同
         *宽高使用vp虚拟像素单位，保证在不同设备的视觉一致，开发中建议都使用vp，因为vp会根据设备显示能力自动进行转换
         *背景定位使用的px实际物理像素点，分辨率单位
         *使用vp2px（） 将vp转换得到px解决
         */
        .backgroundImagePosition({x:vp2px(10),y:vp2px(10)})  //图片位置，x y 分别设置图片左顶点的位置
    }
    .width("100%")

  }
}

位置枚举 Alignment

用于设置特殊位置（中心，左顶点等等）

.backgroundImagePosition(Alignment.XXX)

@Entry
@Component
struct Index {
  @State message: string = 'Hello World';
  build() {
    Column({space:20}){
      Text("戏神")
        .fontSize(70)
        .backgroundColor(Color.Pink)
        .backgroundImage($r("app.media.XiShen"),ImageRepeat.NoRepeat)//图片路径，平铺方式
        .backgroundImagePosition(Alignment.Center) //图片特殊位置 center中心 TopStart左顶点等
    }
    .width("100%")

  }
}

背景尺寸大小.backgroundImageSize({})

背景图大小宽高设置.backgroundImageSize({width:xxx ,height:xxx })

@Entry
@Component
struct Index {
  @State message: string = 'Hello World';
  build() {
    Column({space:20}){
      Text("背景图尺寸")
        .fontSize(70)
        .height(200)
        .width(200)
        .backgroundColor(Color.Pink)       
        .backgroundImageSize({width:200,height:200})


    }
    .width("100%")

  }
}

背景图大小枚举.backgroundImageSize(ImageSize.XXX)

ImageSize.Auto 默认效果背景图原尺寸

ImageSize.Cover 放大或缩小图片与组件全覆盖，不会留白，图片可能展示不全

ImageSize.Contain 放大或缩小图片与组件与组件的宽或高相等，可能留白，图片展示完整

@Entry
@Component
struct Index {
  @State message: string = 'Hello World';
  build() {
    Column({space:20}){
      Text("背景图大小")
        .fontSize(70)
        .height(200)
        .width(200)
        .backgroundColor(Color.Pink)
        .backgroundImage($r("app.media.XiShen"),ImageRepeat.NoRepeat)//图片路径，平铺方式    
        .backgroundImageSize(ImageSize.Contain)
         /**
          *  枚举 Auto默认 原尺寸， 
          * Cover  全覆盖图片可能展示不全， 不会留白
          * Contain  背景图与组件宽或高相等图片完全展示，可能会留白
          */    

    }
    .width("100%")

  }
}