一、把文字做成图片，然后将图片作为背景。当然这样的话文字是没办法动态生成的。
二、把文字层作为底层，上层放内容。
举个例子：
.page{
width:100px
height:100px
position:relative}
.textbg{
position:absolute
left:0px
top:0px
width:100px
height:100px
z-index:-1
color:#999999
}
<div class="page">
<div class="textbg">背景文字背景文字背景文字背景文字背景文字背景文字背景文字背景文字背景文字背景文字背景文字背景文字</div>
<span>内容文字内容文字内容文字</span>
</div>
方法：
用letter-spacing调整文本的字间距，然后在父元素用background-image设置背景图片（可以用单个圆型图案设置background-repeat:repeat-y纵向重复。
每个a标签放一个字，然后设置边框属性和背景颜色，实例如下：
<html><head>
<style>
a {
display: inline-block
width: 40px
height: 32px
padding-top: 8px
text-align: center
border: 1px solid yellow
border-radius: 20px
background: green
}
</style>
<!--
注：border-radius = width * 0.5，height = width - padding top
padding-top用于调整文字垂直位置，数值视显示效果而定
-->
</head>
<body>
<a>实</a>
<a>例</a>
</body>
</html>
