css设置文字在图片上面显示（使用Position及引入背景图片(background-image: url(path))）

最新推荐文章于 2024-08-30 15:49:48 发布

蓝胖子的多啦A梦

最新推荐文章于 2024-08-30 15:49:48 发布

阅读量2.3k

点赞数 3

文章标签： css 前端定位

本文链接：https://blog.csdn.net/maxueyingying/article/details/136940071

版权

<div class="container">
  <img src="image.jpg" alt="背景图片">
  <div class="h-title">这里是文字</div>
  <div class="config-title">这里是文字2</div>
</div>

方法一：使用`绝对定位`

CSS代码

 .container {
        position: relative;/相对定位/
        top: 0;
        left: 0;
 }
 .h-title {
        position: absolute;/绝对定位/
        top: 85px;
        left: 20px;
        font-size: 16px;
        font-weight: 700;
 }

 .config-title {
        position: absolute;/绝对定位/
        top: 125px;
        left: 20px;
        font-size: 10px;
        font-weight: 400;
        border: 1px solid #fff;
        border-radius: 4px;
        padding: 2px 8px 3px 8px;
        text-align: center;
        cursor: pointer;
 }

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

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

<div class="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-repeat: no-repeat;
        text-align: right;
    }
</style>