• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# 背景设置
2
3设置组件的背景样式。
4
5>  **说明：**
6>
7>  从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
8
9## 属性
10
11| 名称 | 参数类型 | 描述 |
12| -------- | -------- | -------- |
13| backgroundColor | [ResourceColor](ts-types.md#resourcecolor) | 设置组件的背景色。<br/>从API version 9开始，该接口支持在ArkTS卡片中使用。 |
14| backgroundImage | src:&nbsp;[ResourceStr](ts-types.md#resourcestr),<br/>repeat?:&nbsp;[ImageRepeat](ts-appendix-enums.md#imagerepeat) | src：图片地址，支持网络图片资源地址和本地图片资源地址和Base64，不支持svg类型的图片。<br/>repeat：设置背景图片的重复样式，默认不重复。当设置的背景图片为透明底色图片，且同时设置了backgroundColor时，二者叠加显示，背景颜色在最底部。<br/>从API version 9开始，该接口支持在ArkTS卡片中使用。 |
15| backgroundImageSize | {<br/>width?:&nbsp;[Length](ts-types.md#length),<br/>height?:&nbsp;[Length](ts-types.md#length)<br/>}&nbsp;\|&nbsp;[ImageSize](ts-appendix-enums.md#imagesize) | 设置背景图像的高度和宽度。当输入为{width:&nbsp;Length,&nbsp;height:&nbsp;Length}对象时，如果只设置一个属性，则第二个属性保持图片原始宽高比进行调整。默认保持原图的比例不变。<br/>width和height取值范围： [0, +∞)<br/>默认值：ImageSize.Auto<br/>从API version 9开始，该接口支持在ArkTS卡片中使用。<br/>**说明：** <br/>设置为小于0的值时，按值为0显示。当设置了height未设置width时，width根据图片原始宽高比进行调整。 |
16| backgroundImagePosition | [Position](ts-types.md#position8)&nbsp;\|&nbsp;[Alignment](ts-appendix-enums.md#alignment) | 设置背景图在组件中显示位置，即相对于组件左上角的坐标。<br/>默认值：<br/>{<br/>x:&nbsp;0,<br/>y:&nbsp;0<br/>} <br/> x和y值设置百分比时，偏移量是相对组件自身宽高计算的。<br/>从API version 9开始，该接口支持在ArkTS卡片中使用。 |
17
18## 示例
19
20```ts
21// xxx.ets
22@Entry
23@Component
24struct BackgroundExample {
25
26  build() {
27    Column({ space: 5 }) {
28      Text('background color').fontSize(9).width('90%').fontColor(0xCCCCCC)
29      Row().width('90%').height(50).backgroundColor(0xE5E5E5).border({ width: 1 })
30
31      Text('background image repeat along X').fontSize(9).width('90%').fontColor(0xCCCCCC)
32      Row()
33        .backgroundImage('/comment/bg.jpg', ImageRepeat.X)
34        .backgroundImageSize({ width: '250px', height: '140px' })
35        .width('90%')
36        .height(70)
37        .border({ width: 1 })
38
39      Text('background image repeat along Y').fontSize(9).width('90%').fontColor(0xCCCCCC)
40      Row()
41        .backgroundImage('/comment/bg.jpg', ImageRepeat.Y)
42        .backgroundImageSize({ width: '500px', height: '120px' })
43        .width('90%')
44        .height(100)
45        .border({ width: 1 })
46
47      Text('background image size').fontSize(9).width('90%').fontColor(0xCCCCCC)
48      Row()
49        .width('90%').height(150)
50        .backgroundImage('/comment/bg.jpg', ImageRepeat.NoRepeat)
51        .backgroundImageSize({ width: 1000, height: 500 })
52        .border({ width: 1 })
53
54      Text('background fill the box(Cover)').fontSize(9).width('90%').fontColor(0xCCCCCC)
55      // 不保准图片完整的情况下占满盒子
56      Row()
57        .width(200)
58        .height(50)
59        .backgroundImage('/comment/bg.jpg', ImageRepeat.NoRepeat)
60        .backgroundImageSize(ImageSize.Cover)
61        .border({ width: 1 })
62
63      Text('background fill the box(Contain)').fontSize(9).width('90%').fontColor(0xCCCCCC)
64      // 保准图片完整的情况下放到最大
65      Row()
66        .width(200)
67        .height(50)
68        .backgroundImage('/comment/bg.jpg', ImageRepeat.NoRepeat)
69        .backgroundImageSize(ImageSize.Contain)
70        .border({ width: 1 })
71
72      Text('background image position').fontSize(9).width('90%').fontColor(0xCCCCCC)
73      Row()
74        .width(100)
75        .height(50)
76        .backgroundImage('/comment/bg.jpg', ImageRepeat.NoRepeat)
77        .backgroundImageSize({ width: 1000, height: 560 })
78        .backgroundImagePosition({ x: -500, y: -300 })
79        .border({ width: 1 })
80    }
81    .width('100%').height('100%').padding({ top: 5 })
82  }
83}
84```
85
86![zh-cn_image_0000001219982703](figures/zh-cn_image_0000001219982703.png)
87