css里有没有办法把文字设为背景啊？

html-css023

css里有没有办法把文字设为背景啊？,第1张

我觉得就两种方法吧：

一、把文字做成图片，然后将图片作为背景。当然这样的话文字是没办法动态生成的。

二、把文字层作为底层，上层放内容。

举个例子：

.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>