css将文字置于图片上的方法

我们在开发的时候，有大量的场景需要将文字至于图片之上，如图:

微信号：gaogaojie5
添加微信好友, 获取更多信息
复制微信号

以上是将“空山新雨后，天气晚来秋”加在图片之上。对于大多数情况，我们都可以将图片作为背景图引入，但有些时候不能将图片作为背景图引入，这个时候就要用到其他的方法，以下我们提供三种方法来实现以上场景。

方法一：引入背景图片(background-image: url(path))

在引入背景图片的时候，我们需要注意背景图片的大小，如果和div大小不同，则我们需要调整background-size属性使图片适配div大小。代码如下：

<div id="container">
	<div class="imgbox box1">空山新雨后，天气晚来秋</div>
</div>
<style>
#container .imgbox{
        height: 216px;
        width: 384px;
    }
#container .box1 {
        font-size: 20px;
        color: ivory;
        background-image: url(../static/images/redLeafage.jpg);
        background-size: 384px 216px;
        /* background-size: inherit; */
        background-repeat: no-repeat;
        text-align: right;
    }
</style>

方法二：绝对定位

对于不能将图片作为背景的情况，用绝对定位的方法即可实现文字置于图片之上，该情况下，图片也可以设置透明度，并且不用设置图片宽高，让其适应父div宽高即可，较为方便。代码如下：

<div id="container">
        <p>法一：</p>
        <div class="imgbox">
            <img src="../static/images/redLeafage.jpg">
            <lable>空山新雨后，天气晚来秋</lable>
        </div>
</div>
<style>
#container .imgbox{
        height: 216px;
        width: 384px;
    }
#container img {
        position: absolute;/*设为绝对定位*/
        opacity: 0.7;/*设置透明度*/
    }
#container lable {
        width: inherit;
        text-align: right;
        font-size: 20px;
        color: ivory;
        position: absolute;/*设为绝对定位*/
    }
</style>

设置了透明度以后，以上代码呈现的效果如下：

方法三：将图片置于底层

除了以上两种方法以外，还可以通过将图片置于底层的方式让文字置于图片之上，这种情况要借助绝对布局和相对布局，不仅可实现两个div层叠的场景，对于更为复杂的场景也适用，实现图片效果的代码如下：

<div class="imgbox">
    <!-- 最外层div设置为绝对定位 -->
    <div style="position: absolute;">
        <img class="box-img" src="../static/images/redLeafage.jpg">
        <div class="box-font">空山新雨后，天气晚来秋</div>
    </div>
</div>
<style>
#container .imgbox{
        height: 216px;
        width: 384px;
    }
 #container .box-img {
        position: relative;/*相对布局*/
        z-index: -1;/*置于底层*/
    }
#container .box-font {
        font-size: 20px;
        color: ivory;
        position: absolute;/*绝对布局*/
        z-index: 1;/*置于上层*/
        display: inline;
        top: 0;
        right: 0;
    }
</style>

使用该方法时，对于文字的绝对布局，需要用定位元素对文字的位置进行定位。