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

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

方法一:使用绝对定位

CSS代码

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大小。代码如下:

html 复制代码
<div class="container">
	<div class="imgbox box1">这是文字</div>
</div>
css 复制代码
<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>
相关推荐
inxunoffice27 分钟前
批量在多个 PDF 的指定位置插入页,如插入封面、插入尾页
前端·pdf
木木黄木木32 分钟前
HTML5 Canvas绘画板项目实战:打造一个功能丰富的在线画板
前端·html·html5
豆芽81934 分钟前
基于Web的交互式智能成绩管理系统设计
前端·python·信息可视化·数据分析·交互·web·数据可视化
不是鱼34 分钟前
XSS 和 CSRF 为什么值得你的关注?
前端·javascript
顺遂时光38 分钟前
微信小程序——解构赋值与普通赋值
前端·javascript·vue.js
anyeyongzhou40 分钟前
img标签请求浏览器资源携带请求头
前端·vue.js
Captaincc1 小时前
腾讯云 EdgeOne Pages「MCP Server」正式发布
前端·腾讯·mcp
最新资讯动态1 小时前
想让鸿蒙应用快的“飞起”,来HarmonyOS开发者官网“最佳实践-性能专区”
前端
雾岛LYC听风1 小时前
3. 轴指令(omron 机器自动化控制器)——>MC_GearInPos
前端·数据库·自动化
weixin_443566981 小时前
39-Ajax工作原理
前端·ajax