1# ContainerSpan
2
3As a child of the [Text](ts-basic-components-text.md) component, the **ContainerSpan** component is used to manage the background colors and rounded corners of multiple [Span](ts-basic-components-span.md) and [ImageSpan](ts-basic-components-imagespan.md) components in a unified manner.
4
5> **NOTE**
6>
7> This component is supported since API version 11. Updates will be marked with a superscript to indicate their earliest API version.
8
9## Child Components
10
11This component can contain the [Span](ts-basic-components-span.md) and [ImageSpan](ts-basic-components-imagespan.md) child components.
12
13## APIs
14
15ContainerSpan()
16
17**Atomic service API**: This API can be used in atomic services since API version 12.
18
19**System capability**: SystemCapability.ArkUI.ArkUI.Full
20
21## Attributes
22
23Only the following attributes are supported.
24
25### textBackgroundStyle
26
27textBackgroundStyle(style: TextBackgroundStyle)
28
29Sets the text background style. If this attribute is not separately set for a child component, the child component inherits the settings from the component.
30
31**Atomic service API**: This API can be used in atomic services since API version 12.
32
33**System capability**: SystemCapability.ArkUI.ArkUI.Full
34
35**Parameters**
36
37| Name| Type                                               | Mandatory| Description                                                        |
38| ------ | --------------------------------------------------- | ---- | ------------------------------------------------------------ |
39| style  | [TextBackgroundStyle](ts-basic-components-span.md#textbackgroundstyle11) | Yes  | Text background style.<br>Default value:<br>{<br>  color: Color.Transparent,<br>  radius: 0<br>} |
40
41### attributeModifier<sup>12+</sup>
42
43attributeModifier(modifier: AttributeModifier\<ContainerSpanAttribute>)
44
45Creates an attribute modifier.
46
47**Atomic service API**: This API can be used in atomic services since API version 12.
48
49**System capability**: SystemCapability.ArkUI.ArkUI.Full
50
51**Parameters**
52
53| Name| Type                                               | Mandatory| Description                                                        |
54| ------ | --------------------------------------------------- | ---- | ------------------------------------------------------------ |
55| modifier  | [AttributeModifier](ts-universal-attributes-attribute-modifier.md#attributemodifiert)\<ContainerSpanAttribute> | Yes  | Modifier for dynamically setting attributes on the current component.|
56
57## Events
58
59The [universal events](ts-universal-events-click.md) are not supported.
60
61## Example
62
63This example demonstrates the effect of setting a background style for text using the **textBackgroundStyle** attribute.
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