CSS图片上面放文字实现方式

最新推荐文章于 2024-09-19 15:42:50 发布

楊帥

最新推荐文章于 2024-09-19 15:42:50 发布

阅读量2.7k

点赞数 1

分类专栏： ----------Web前端---------- 文章标签： css html 浮动图片文字

本文链接：https://blog.youkuaiyun.com/yangshuaionline/article/details/116570582

版权

----------Web前端---------- 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了如何使用CSS在图片上方放置文字，通过代码示例展示了具体实现方法，包括关键CSS属性的运用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

忽略我用element-ui不熟悉的渣渣代码～～～

要实现的效果

在这里插入图片描述

代码

	<div style="width:100%;height:400px;position:relative">
      <el-image
        style="width: 100%; height: 400px;position:absolute;left:0px"
        :src="require('@/assets/sea.jpeg')"
        fit="cover"
      >
      </el-image>
      <div style="width:100%;height:100px;position:absolute;top:150px">
        <span style="color:white;font-size:40px;line-height:100px">坚持自己，莫问前程！</span>
      </div>
    </div>