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

悠悠 2023-01-19 09:48 19阅读 0赞

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

### 要实现的效果 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbmdzaHVhaW9ubGluZQ_size_16_color_FFFFFF_t_70]

### 代码 ###

<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>

这里生效的代码主要是`position:relative`和`position:absolute;left:0px`，如果没有`position:relative`效果为下图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbmdzaHVhaW9ubGluZQ_size_16_color_FFFFFF_t_70 1]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbmdzaHVhaW9ubGluZQ_size_16_color_FFFFFF_t_70]: /images/20221021/af98436bb6e745d68a366067cd962ed9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbmdzaHVhaW9ubGluZQ_size_16_color_FFFFFF_t_70 1]: /images/20221021/e2f8070b46e44b7b8aa869148773a377.png

发表评论取消回复

表情：

评论列表（有 0 条评论，19人围观）

还没有评论，来说两句吧...

相关阅读

相关 CSS实现图片悬停文字叠加效果

引言在这篇文章中，我们将看到如何轻松创建一个漂亮的图像悬停文本覆盖效果。对于本教程，你必须具备充分的 `HTML` 和 `CSS` 基本知识。 ![图片][af8bb

客官°小女子只卖身不卖艺/ 2023年01月21日 02:11/ 0 赞/ 308 阅读

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

`忽略我用element-ui不熟悉的渣渣代码～～～` 要实现的效果 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_s

悠悠/ 2023年01月19日 09:48/ 0 赞/ 20 阅读

相关 CSS图片文字排版03

实现思路主要技术主要使用CSS属性visibility: hidden;将p标签文字隐藏起来，再通过：hover选择器来改变类card的高度，将p标签文字visibil

女爷i/ 2022年11月29日 11:26/ 0 赞/ 239 阅读

相关 CSS实现图片文字排版02

实现思路使用:hover选择器，当鼠标划入时，transform: scale(1.20);将图片放大1.2倍，再改变文字的外边距，达到动态效果。实现效果 !

Dear 丶/ 2022年11月27日 12:15/ 0 赞/ 326 阅读

相关 CSS图片文字排版01

实现思路通过clip-path属性剪切不同时刻图片大小，开始，给h2，p，a标签影藏并使用transform: translateY()属性，设置不同的偏移量，通过:h

素颜马尾好姑娘i/ 2022年11月27日 12:11/ 0 赞/ 263 阅读

相关 java图片处理文字水印图片水印缩放补白

[http://blog.csdn.net/fenglingcompany/archive/2009/11/16/4816021.aspx][http_blog.csdn.ne

超、凢脫俗/ 2022年07月13日 16:18/ 0 赞/ 401 阅读

相关 css3实现鼠标悬浮文字上方，文字底部的下划线向两边缩放！

> 采用css3加伪类的方式显示当鼠标悬浮在文字上方时，文字底部出现向两边展开的效果！ css部分 .text-underline{ display: inline

r囧r小猫/ 2022年05月26日 11:59/ 0 赞/ 777 阅读

相关 css图片和文字对齐

图片和文字居中对齐 display: flex; align-items: center; justify-content: ce

冷不防/ 2022年03月28日 06:06/ 0 赞/ 384 阅读

相关【前端】CSS 背景图片缩放

通过background-size指定背景图像的大小。CSS3以前，背景图像大小由图像的实际大小决定。 CSS3中可以指定背景图片，让我们重新在不同的环境中指定背景图片的...

你的名字/ 2021年01月07日 12:36/ 0 赞/ 970 阅读

相关实现文字图片生成，文字图片旋转及文字图片扭曲（python版）

旋转和扭曲主要用到仿射变换及透视变换，直接上代码： conding:utf-8 import cv2 import numpy as np ...

朱雀/ 2020年10月17日 18:27/ 0 赞/ 1642 阅读