html设置文字在背景图上,css如何实现文字在背景图片之上 css实现文字在背景图片之上代码...

css如何实现文字在背景图片之上？本篇文章小编给大家分享一下css实现文字在背景图片之上代码，文章代码介绍的很详细，小编觉得挺不错的，现在分享给大家供大家参考，有需要的小伙伴们可以来看看。

效果：

非常感谢！

您已投票：{{item.voteTime}}

抱歉，您未完成投票~

data() {

return {

imgSrc1:require('@/common/imgs/yitoupiao.png'),

imgSrc2:require('@/common/imgs/weiwancheng.png'),

}

外面大的div：设置宽高；

背景图片：

1)如果是铺满则宽高都设置100%，

2)如果只占一个部分可设置定位。重点：z-index一定要比文字的层级低，否则会被遮住；

文字：根据需求放置位置可定位可不定位，重点z-index设置高于图片；

.imgs {

background: #fff;

position: relative;

width: 100%;

height: 250px;

color: #195541;

.background{

// width:100%;

// height:100%; /**宽高100%是为了图片铺满屏幕 */

// z-index:-1;

z-index:1;

position: absolute;

width: 250px;

height: 100%;

right: 20px;

bottom: 0px;

}

.front{

z-index:2;

position: absolute;

text-align: center;

top: 39%;

left: 25%;

font-weight: normal;

line-height: 40px;

font-size: 28px;

}

开发过程中遇到一个bug：就是一开始设置的背景图片z-index为-1，导致在h5上，背景图片一会儿能显示一会儿没法显示，后来改为正数1，才解决了这个问题。

html设置文字在背景图上,css如何实现文字在背景图片之上 css实现文字在背景图片之上代码...相关推荐

PHP将图片和文字合成到一张背景图上
PHP将图片和文字合成到一张背景图上 /*** 将两张图片合成一张* $bg_path 背景图地址* $poster 图片2* $x 图片2在背景图片上位置的左边距,单位:px (例:436)* $y ...
java 通过JLayeredPane实现背景图上添加其他控件
通过JLayeredPane实现背景图上添加其他控件 JLayeredPane为容器添加了深度,允许组件在需要时互相重叠. JLayeredPane将深度范围按层划分,在同一层内又对组件按位置进一 ...
java原生的Graphics2D_背景图上添加图片
1.初始化 public void init(){private String backgroundImgPath="背景图片位置";private String contentI ...
php两张图片动态合成thinkphp实现二维码及文字水印合并拼接到背景图上
实现场景: 1,本站注册的推广分销人员需要有自己的独有邀请码,这个邀请码需要转换成二维码,并让推广员保存在手机相册中,分发到其它群中,进行二维码图片推广 2,但是单独二维码过于简陋, 不够吸引眼球.需 ...
用matlab在RGB三色背景图上生成随机的点或线
1.生成随机点: 主程序: clear; clc; picture_name = 1; %用来标记生成图片的序号for i = 1 : 2 %要生成几张图片,就改成几次循环,这里是生成两张图片RGB_ ...
一键可以轻松替换人物背景图，效果出乎意料的好（附 Python 代码）
最近发现 BackgroundMattingV2 项目的一些使用上的小缺陷,但是他却可以做到头发丝精细的抠图效果.我将项目稍微魔改了一下,让他在可以选择单一图片的基础上,可以把抠好的图片贴在自定义的背 ...
CSS实现背景图毛玻璃效果和如何保持图片上的文字显示正常
说明因为我的底子特别的差(大佬勿喷),今天想让文字在图片上方显示,并且给图片模糊,结果当图片模糊之后也就是实现毛玻璃效果后,发现图片上的文字也模糊掉了,这个问题当然可以用伪元素的方式解决,但是由于某 ...
html图片背景属性,css 背景(background)属性、背景图定位
background属性: Background属性是css中应用比较多,且比较重要的一个属性,它是负责给盒子设置背景图上和背景颜色的,background是一个复合属性,它可以分解成如下几个设置项: ...
纯色html背景,css 背景(background)属性、背景图定位
background属性: Background属性是css中应用比较多,且比较重要的一个属性,它是负责给盒子设置背景图上和背景颜色的,background是一个复合属性,它可以分解成如下几个设置项: ...
全屏css,CSS之全屏背景图
吐槽啦:Yeah 明天就是国庆了o(*￣▽￣*)o!哈哈,提前祝福各位园友国庆快乐.假期愉快.生活美满.天天开心!国庆我要回家一趟,把一些不用的东西带回家,走访一下亲朋好友,在家打几天酱油~~~ 言 ...

html设置文字在背景图上,css如何实现文字在背景图片之上 css实现文字在背景图片之上代码...

html设置文字在背景图上,css如何实现文字在背景图片之上 css实现文字在背景图片之上代码...相关推荐

最新文章

热门文章