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

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

要实现的效果

代码

 <div style="width:100%;height:400px;position:relative"><el-imagestyle="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效果为下图：

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

css图片填充的几种方式
当图片比例不固定时,想要让图片自适应,一般都会用background-size:cover/contain,但是这个只适用于背景图. img有个属性object-fit 属性值:object-fit: ...
html 如何把文字和图片放到一行,DIV+CSS图片和文字如何显示同一行
如果把文字和图片放在同一个图层的,文字可以做到居中,但是图片就不能,因为图片默认是左上对齐的!如果你令到图片居中了,文字就会相对于图片右下对齐了!如果你想2个都居中的话,就不能把他们放在同一个div, ...
html点击文字展开图片,DIV CSS鼠标经过悬停在图片上时图片上方显示文字
DIV CSS鼠标悬停在没有文字内容图片上时图片上方显示文字,完全是纯css div实现.CSS实现鼠标悬停放图片上方时显示美化内容. 原始图片显示没有文字在上方,当鼠标经过悬停时显示文字并且文字背景 ...
html图片文字下方,css图片下边怎么加字
css图片下边怎么加字比较简单的做法就是,将他们放置在一个盒子内,让文字跟图片居中,只需要利用css样式的text-align属性即可,并且各个浏览器都会正常显示,代码如下: 这里是居中的文字 .b ...
html图片隐藏文字,怎样用CSS隐藏图片背景的文字内容
这次的案列是怎样用CSS隐藏图片背景的文字内容,我们先使用使用background背景是将图片设为背景显示:然后使用text-indent缩进是隐藏a链接内容和链接标签是对文字设置锚文本链接.下面就是 ...
html图片左侧现实文字,css 关于图片上显示文字
图片上显示文字,现在有很多主流的方法,最常用的就是position设置为relative或者absolute. 本文带来了一种新的实现方式:采用height为0+overflow为visible的方式 ...
css图片和文字一样高,css里图片和文字如何等高
CSS 让同一行的图片和文字对齐大家在做前端开发的时候那,经常会遇到img标签和文字在同一行. 那么我刚开始的时候那是利用的float浮动布局解决的,定位布局(兼容性需要调整不划算)下面给大家介绍 ...
[css] 给一个图片设置透明有哪些方式呢？
[css] 给一个图片设置透明有哪些方式呢? 1.opacity : 0 -> 子元素会继承 2.外层用盒子包裹,设置其rgba(255,255,255,0) 个人简介我是歌谣,欢迎和大家一起 ...
html转word 图片丢失 java_Java 设置 Word 文档中图片文字环绕方式
在Word文档中插入图片时,选择合理的图片文字环绕方式可以使图片的展示效果更好,也能使页面的排版更加美观.本文就将介绍如何使用Free Spire.Doc for Java 添加图片到Word文档并设 ...
css图片上漂浮着文字效果
1.效果: 2.html代码: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <H ...

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

要实现的效果

代码

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

最新文章

热门文章