div内容用html语言写,html – 使用DIV作为另一个元素的背景

这里我用2个div做了一个例子:

> .content,包含前端所需的一切

> .background – 包含文本,图像和背景中的所有其他内容

要将一个div包装在另一个div上(制作叠加层),你必须将它们放入相同的元素中,在本例中它是#wrapper div.放置位置:包装的相对宽度/高度; position:relative也应该为你的内容div和position设置:absolute;顶部:0;左:0;为你的背景.

最后一步是设置z-index.在z-index中包含较大值的元素将呈现在具有较小z-index值的元素上方.换句话说,您应该为背景div设置z-index,然后为内容div设置.

最终HTML:

This text is in frontend

Background text

background

background 2

最终的CSS:

#wrapper{

position: relative;

width: 200px;

height: 200px;

}

.content{

color: #FFFFFF;

font-size: 26px;

font-weight: bold;

text-shadow: -1px -1px 1px #000, 1px 1px 1px #000;

position: relative;

z-index: 100;

}

.background{

color: #999999;

position: absolute;

top: 0;

left: 0;

z-index: -100;

}

查看实时示例:

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/355894.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

jetty 配置jndi_使用Jetty设置JNDI(嵌入式)

jetty 配置jndi我在开发工作区上运行嵌入式Jetty,从而节省了一些恶性的编译和部署周期。 我与Jetty的合作不多,易用性使我着迷于它。 我需要设置JNDI才能检索与数据库相关的活动的连接池。 尽管某些地方有完整的文档,但大多数都是分散的。 因…

auot lisp 选择集处理_离散量的计算机处理63_1Cv6

计算机语言运用--数值计算6-离散量的计算机处理63_1Cv6计算机:电子线路组成的计算机器。人与计算机则是通过计算机语言-符号系统说给计算机听而交流。计算机语言有低级语言-机器语言、汇编、高级语言-C/C/C#/VB/PASCAL/LISP/JAVA/PYTHON/……成百上千种之多。作为一…

linkedblockingqueue 后 take 不消化_消化不良的成因及护理

疾病名称:消化不良就诊科室:消化内科疾病成因心理和精神的不良应激:患者的精神不愉快、长期闷闷不乐或突然受到猛烈的刺激等均可引起。不良饮食习惯:包括刺激性食物(咖啡、浓茶、甜食、油腻、生冷等)和不良…

Yandex.Algorithm 2011 Round 2 D. Powerful array 莫队

题目链接:点击传送D. Powerful arraytime limit per test5 secondsmemory limit per test256 megabytesinputstandard inputoutputstandard outputAn array of positive integers a1, a2, ..., an is given. Let us consider its arbitrary subarray al, al  …

html 形状div,div+css实现各种形状(精心整理)

1.正方形.div {width: 100px;height: 100px;background: red;}2.矩形.div {width: 200px;height: 100px;background: red;}3.圆形.div {width: 100px;height: 100px;background: red;-moz-border-radius: 50px;-webkit-border-radius: 50px;border-radius: 50px;}4.椭圆.div {w…

4.1.5事件

用事件有一种监听的思想 一个事件对应一个委托 事件是委托类型 一个事件对应一个委托,委托可以对应多个方法 如气球爆炸了 气球的反应 小孩的反应 事件源有代码自动激发事件 扔出事件 —————————————— 3.只能在类的内部触发事件 4.可以在内部…

485不用双绞线可以吗_现在在上海,挡风玻璃可以一个标志都不用贴吗?

问近日,有市民咨询:现在在上海,车上挡风玻璃可以一个标志都不用贴吗?答可以一个标志都不贴。自2020年3月1日起,本市机动车在本市办理注册、变更、转移登记和核发检验标志、补换检验标志业务时,将自动生成检…

2021上饶市高考中考成绩查询,2021年上饶中考成绩公布查询时间 上饶中考成绩查询方式入口...

2018年上饶中考成绩公布查询时间 上饶中考成绩查询方式入口2018年上饶高考结束了,可是上饶中考又来了!6月注定是一个不平淡的月份。又一大批孩子朝着青春出发踏着坚定的脚步,行走在如火的六月。宁静的清晨,静谧的夜,那条反反复复走…

git中文件的三种状态

用xcode的时候,左侧栏文件的邮右边时不时会看到M,A这一类的字母。当然,这些以后再写上。先说一下git里文件的三种状态 已提交(committed) 已经提交的本地仓库(repository),需要手动…

桌面怎么设置 计算机 网络,Win10 10130桌面电脑网络图标怎么设置?

越来越多朋友的计算机安装Windows10系统,现在Windows10系统已经升级到10130版,我的计算机升级到了10130版。安装Windows10的10130版系统后,桌面只有回收站和软媒的图标,如何把电脑、网络、用户的文件、控制面板等图标设置到桌面上…

swift 打开第三方应用_iOS卡通人物帧动画入门9(大结局):番外篇-扩展第三方类

扩展第三方类细心的朋友可能会发现,我们前面计算主角的大小用的总是同一方向第一帧纹理的大小,如果纹理大小有出入的话,会产生较大的偏差,最好的方法是取当前动画帧纹理的大小。不过这有些难度,所以我们退之求其次&…

vue如何过滤html标签,去除富文本中的html标签及vue、react、微信小顺序中的过滤器...

在猎取富文本后,又只需显现部分内容,须要去除富文本标签,然后再截取个中一部分内容;然后就是过滤器,在微信小顺序中运用照样挺屡次的,在vue及react中也遇到过1.富文本去除html标签去除html标签及 空格let r…

声速的测量的实验原理和应用_CEMS烟气在线分析仪测量原理计经典应用

烟气连续在线监测系统运用抽取冷凝采样、后散射烟尘浓度测量、皮托管烟气流速测量及计算机网络通讯技术,实现了固定污染源污染物排放浓度和排放总量的在线连续监测。同时又针对国内煤种较杂、煤质变化大、污染物排放浓度高、烟气湿度大的状况从技术上进行了改进。并…

怎么用计算机算弧度制,怎么设置计算器 把度数转化为弧度

计算器默认角度制(D)。此时,按下mode,mode,2(Rad),可将计算器调整为弧度制。输入要转化的角度(如30),按下shift,ans(DRG三角),1(D),画面将显示30度,按下等号,…

datagrid 什么时候结束编辑_孕吐到底什么时候结束

很多女性刚怀孕,都会出现妊娠反应,比如孕吐。它是由妊娠后绒毛分泌的绒毛膜促进腺激素引起的,在妊娠初期腺激素分泌量较多。备受孕吐折磨的女性,每次吃饭,一闻到刺激性味道,就会想吐,非常难受&a…

201521123032 《Java程序设计》第7周学习总结

1. 本周学习总结 以你喜欢的方式(思维导图或其他)归纳总结集合相关内容。 2. 书面作业 ArrayList代码分析 1.1 解释ArrayList的contains源代码 在contains方法中调用indexOF方法,首先比较下标o,如果onull那么elementData[]中是否n…

三相同步电机怎么接线图_三相电度表怎么看倍数

电工之家:www.dgzj.com QQ群:2179090关注电工之家官方微信公众号“电工之家”,收获更多经验知识。从题主给的照片来看,这个电度表型号是DTS901-4 1.5(6)A 3X220V/380V精确度为1的1级互感器间接接线的三相四线有功电子电度表。那…

linux msgrcv阻塞接收_linux下高并发服务器实现

在做网络服务的时候tcp并发服务端程序的编写必不可少。tcp并发通常有几种固定的设计模式套路,他们各有优点,也各有应用之处。下面就简单的讨论下这几种模式的差异:单进程,单线程在accept之后,就开始在这一个连接连接上…

使用Apache Storm和Kite SDK Morphlines的可配置ETL处理

从我担任软件工程师的第一天起,我总是听到很多方面的相同要求: “ 我们希望所有内容都可配置,我们希望在运行时更改所有内容,我们希望有一个可视化工具来应用所有这些逻辑,以便非开发人员使用和配置我们的应用程序。 …

oracle 闪回操作(flashback)

234390216 的留下学习 原文地址 http://haohaoxuexi.iteye.com/blog/1594391 Oracle的闪回功能可以在对数据库进行不完全恢复的情况下,对某一个指定的表进行恢复。闪回数据库是进行时间点恢复的新方法,它能够快速将Oracle恢复到以前的时间,以…