在线时间:8:00-16:00
迪恩网络APP
随时随地掌握行业动态
扫描二维码
关注迪恩网络微信公众号
最近在跟的一个深圳屋祺项目,由于一些内部原因这次我们需要自己写静态页面。兵来将挡水来土掩,既然组织 需要那就做呗。其中有一个页面布局如下所示,
红色方框标注的部分是由三张图片组合而成,各部分图片如下:
要想实现上图的图片重叠,只需设置属性元素的position和z-index属性。
具体实现如下,div布局 <div class="container3-1" style="float:left;"> <div> <img class="img1" style="position:absolute;z-index:1;float:left" src="img/4-1.png"> <img class="img2" style="position:absolute;z-index:2;float:left" src="img/4-2.png"> <img class="img3" style="position:absolute;z-index:3;float:left" src="img/4-3.png"> </div> <div class="container3-1-1" class="font24" style="text-align:center;color:#FFFFFF; background-color:#aaa050;">需保养 </div> </div> 整合后的运行效果:
到此这篇关于HTML5图片层叠的实现示例的文章就介绍到这了,更多相关HTML5图片层叠内容请搜索极客世界以前的文章或继续浏览下面的相关文章,希望大家以后多多支持极客世界! |
2023-10-27
2022-08-15
2022-08-17
2022-09-23
2022-08-13
请发表评论