有请老师

阙歌

请求，帮忙写关于<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/foru ... &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都正常的。另一个的浏览器就只看到视频了。