1# ContainerSpan
2
3[Text](ts-basic-components-text.md)组件的子组件，用于统一管理多个[Span](ts-basic-components-span.md)、[ImageSpan](ts-basic-components-imagespan.md)的背景色及圆角弧度。
4
5> **说明：**
6>
7> 该组件从API Version 11开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
8
9## 子组件
10
11可以包含[Span](ts-basic-components-span.md)、[ImageSpan](ts-basic-components-imagespan.md) 子组件。
12
13## 接口
14
15ContainerSpan()
16
17**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。
18
19**系统能力：** SystemCapability.ArkUI.ArkUI.Full
20
21## 属性
22
23仅支持以下属性:
24
25### textBackgroundStyle
26
27textBackgroundStyle(style: TextBackgroundStyle)
28
29设置文本背景样式。子组件在不设置该属性时，将继承此属性值。
30
31**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。
32
33**系统能力：** SystemCapability.ArkUI.ArkUI.Full
34
35**参数：**
36
37| 参数名 | 类型                                                | 必填 | 说明                                                         |
38| ------ | --------------------------------------------------- | ---- | ------------------------------------------------------------ |
39| style  | [TextBackgroundStyle](ts-basic-components-span.md#textbackgroundstyle11对象说明) | 是   | 文本背景样式。<br />默认值：<br />{<br />  color: Color.Transparent,<br />  radius: 0<br />} |
40
41### attributeModifier<sup>12+</sup>
42
43attributeModifier(modifier: AttributeModifier\<ContainerSpanAttribute>)
44
45设置组件的动态属性。
46
47**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。
48
49**系统能力：** SystemCapability.ArkUI.ArkUI.Full
50
51**参数：**
52
53| 参数名 | 类型                                                | 必填 | 说明                                                         |
54| ------ | --------------------------------------------------- | ---- | ------------------------------------------------------------ |
55| modifier  | [AttributeModifier](ts-universal-attributes-attribute-modifier.md#attributemodifiert)\<ContainerSpanAttribute> | 是   | 动态设置组件的属性。 |
56
57## 事件
58
59不支持[通用事件](ts-universal-events-click.md)。
60
61## 示例
62
63该示例通过textBackgroundStyle属性展示了文本设置背景样式的效果。
64
65```ts
66// xxx.ets
67@Component
68@Entry
69struct Index {
70  build() {
71    Column() {
72      Text() {
73        ContainerSpan() {
74          ImageSpan($r('app.media.app_icon'))
75            .width('40vp')
76            .height('40vp')
77            .verticalAlign(ImageSpanAlignment.CENTER)
78          Span('   Hello World !   ').fontSize('16fp').fontColor(Color.White)
79        }.textBackgroundStyle({color: "#7F007DFF", radius: "12vp"})
80      }
81    }.width('100%').alignItems(HorizontalAlign.Center)
82  }
83}
84```
85
86![imagespan](figures/container_span.png)
87