有请老师
请求，帮忙写关于<div> 堆叠顺序代码,要求: 一共四个层.最底层为MP4（视频）,倒数第二层为PNG（边框） ,倒数第三层为歌词层（MP3歌词同步), 最上层为GIF(装饰）。代码完全兼容手机及电脑。
谢谢、谢谢！
支持！ 最近探索代码，大约十来天,发现对<div>了解太少,网络有相关教程,学不会。
https://pan.wyc520.net/H5/quege/th/th-5.html
在电脑上正常,针对手机来说有的朋友只看见MP4,有的朋友只显示PNG。我估计是<div>定义有问题。 这个看似复杂，实则简单，可以动手试试的。
HTML代码是这样（得有个父框，papa就是）：
<div id="papa">
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
<div class="div4"></div>
</div>
各 div 的内容自己放。CSS，这是重要部分，papa 相对定位，有尺寸，也许可以有背景，等等，子盒子的公用属性：
.div1, .div2, .div3, .div4 {
position: absolute;
width: 100%;
height: 100%;
opacity: .5;
}
opacity 设为 .5 是半透明，假设某个子 div 透明度要设大一些，则：
.div2 {
opacity: .25;
}
后面的设置会覆盖前面的设置。还可以给 div2 加入其它的属性设置。
这是设想。根据你的需要，其实设三个子div就可以了：父框可以充当一个div。
马黑黑 发表于 2022-10-5 12:48
这个看似复杂，实则简单，可以动手试试的。
HTML代码是这样（得有个父框，papa就是）：
昨晚我试了,用四色彩<div> 自由堆叠顺序,手机及电脑，完美显示。
替换成MP4后，就不正常 阙歌 发表于 2022-10-5 13:03
昨晚我试了,用四色彩 自由堆叠顺序,手机及电脑，完美显示。
替换成MP4后，就不正常
MP4有几个属性要设置一下，这个，论坛里早些时候有过演示，我的花园里，这个帖子也简单谈到：
https://www.huachaowang.com/forum.php?mod=viewthread&tid=61469&extra=page%3D1
当然，视频做为一个层也要看视频自身的设定与品质。 马黑黑 发表于 2022-10-5 13:14
MP4有几个属性要设置一下，这个，论坛里早些时候有过演示，我的花园里，这个帖子也简单谈到：
https:/ ...
谢谢老师! 要学习的内容比较多。
再问一下z-index属性值,我设定后,不起作用啊 阙歌 发表于 2022-10-5 14:01
谢谢老师! 要学习的内容比较多。
再问一下z-index属性值,我设定后,不起作用啊
z-index主要用于调节元素在z轴上的顺序，不起作用的原因很多。通常，没有定位设置的元素，z-index不会产生作用；都设置了定位还不起作用，则需要将覆盖别人的那个降低z-index值，必要时改为负数。 基本不手机玩，所以不清楚哪些手机显示有问题。 底层若是mp4设置的插件都没有用，手机无法欣赏，mp4优先显示，覆盖层好无用处。 建议底层视频转成gif动图！ 亚伦影音工作室 发表于 2022-10-5 17:00
底层若是mp4设置的插件都没有用，手机无法欣赏，mp4优先显示，覆盖层好无用处。
谢谢亚伦老师!mp4优先显示,主要是不支持~~~camera组件z-index属性，ios生效，安卓不生效。
有的华为手机看不见覆盖上层。 亚伦影音工作室 发表于 2022-10-5 17:02
建议底层视频转成gif动图！
的确是个好方法,谢谢! 转成gif图片的体积增大很多，相对我这图形来说,单一用了人物三帧数做衣袂飘飘，gif透明底做的杂色众多，带背景做,导出的动态质量会更高。
论坛里有高手使用高清的gif动图，可请教一下！ 马黑黑 发表于 2022-10-5 16:08
z-index主要用于调节元素在z轴上的顺序，不起作用的原因很多。通常，没有定位设置的元素，z-index不会产 ...
父框子层,也许就是玩代码贴的核心之一。昨晚在Dreamweaver中尝试,关联的程度超出我的想象之外,公用属性动手实践才有一定的认识,谢谢老师! 阙歌 发表于 2022-10-5 18:48
父框子层,也许就是玩代码贴的核心之一。昨晚在Dreamweaver中尝试,关联的程度超出我的想象之外,公用属性动 ...
希望你的探索越来越顺利 与手机的浏览器也有关系吧。
这是ios上的safari，图片和MP4都正常的。另一个的浏览器就只看到视频了。
页:
[1]