7X24小时在线,建站仿站,提供空间域名及数据库,可淘宝交易!安全放心!

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

专职建站仿站2023-03-03 18:11:52429技术文章

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

20200719221325526.png

微信号: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>

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

20200719221325526.png

方法三:将图片置于底层

除了以上两种方法以外,还可以通过将图片置于底层的方式让文字置于图片之上,这种情况要借助绝对布局和相对布局,不仅可实现两个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>

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

转载声明:本站发布文章及版权归原作者所有,转载本站文章请注明文章来源!

网友评论

复制成功
微信号: gaogaojie5
添加微信好友, 获取更多信息
我知道了
添加微信
微信号: gaogaojie5
添加微信好友, 获取更多信息
一键复制加过了