【代码交流】音画永久居中代码

圊圊淥詶

这个代码是苦于论坛几次更换模板，都会偏移尺寸的问题后而来，每次更换模板后都会发现本来居中的音画又偏移了。

现在我们的会员都是在几个论坛玩，每个论坛的页面尺寸都不一样，所以每次发图都要重新调整。

终于这次下定决心，突破这个障碍，算是个小小的福利，大家以后再也不用为每次都来调整自己的尺寸而伤脑筋了，不管什么模板，不管哪个论坛，不管自己的图片是什么尺寸，你都不用管了，照着贴出来的这个代码，你直接更换图片、更换音乐、更换动画即可，什么都不用管了，是不是很爽？(已经亲测多个论坛，有效！)

这个代码是根据花静简、贪心的鱼、青依她们三人的代码组合而成，在此谢谢她们~~

圊圊淥詶

这一组是图片背景平底代码：

1. <div style="Z-INDEX: 32768; POSITION: absolute; MARGIN-TOP: 135px; WIDTH: 100%; LEFT: 0px; overflow: hidden;">
2. <div style="display: flex; justify-content: center; width: 100%;">
3. <div style="max-width: 100%; position: relative; overflow: hidden;">
4. /* 以下代码更换图片链接 */
5. <img src="https://www.yhyhlt.com/data/attachment/forum/202606/30/201641u8tt9cau7phxzv9z.jpg" style="width: 100%; display: block; height: auto;" />
6. <video autoplay loop muted playsinline style="position: absolute; top: 50%; left: 50%; width: 110%; height: 110%; transform: translate(-50%, -50%) scale(1.05); object-fit: cover; mix-blend-mode: screen; opacity: 0.21; pointer-events: none; z-index: 10;">
7. /* 以下代码更换动画链接 */
8. <source src="https://yw83yw.oss-cn-hangzhou.aliyuncs.com/lvzhou/flash/MP4/DH04.mp4" type="video/mp4">
9. </video>
10. </div>
11. </div>
12. </div>
13. <div style="HEIGHT: 1000px"></div>
14. <br><br><br><br><br><br><br><br><br>

复制代码

圊圊淥詶

这一组是图片背景有投影的代码：

1. <div style="Z-INDEX: 32768; POSITION: absolute; MARGIN-TOP: 135px; WIDTH: 100%; LEFT: 0px; overflow: hidden;">
2. <div style="display: flex; justify-content: center; width: 100%; padding: 30px 0; box-sizing: border-box;">
3. <div style="max-width: 100%; position: relative; box-shadow: 3px 3px 20px #000; overflow: hidden;">
4. /* 以下代码更换图片链接 */
5. <img src="https://www.yhyhlt.com/data/attachment/forum/202606/30/201641u8tt9cau7phxzv9z.jpg" style="width: 100%; display: block; height: auto;" />
6. <video autoplay loop muted playsinline style="position: absolute; top: 50%; left: 50%; width: 120%; height: 120%; transform: translate(-50%, -50%) scale(0.86); object-fit: cover; mix-blend-mode: screen; opacity: 0.21; pointer-events: none; z-index: 10;">
7. /* 以下代码更换动画链接 */
8. <source src="https://yw83yw.oss-cn-hangzhou.aliyuncs.com/lvzhou/flash/MP4/DH04.mp4" type="video/mp4">
9. </video>
10. </div>
11. </div>
12. </div>
13. <div style="HEIGHT: 1000px"></div>
14. <br><br><br><br><br><br><br><br><br>

复制代码

圊圊淥詶

这2组代码希望能给大家带来方便，有什么意见也可以给绿洲提出来，愿大家玩图开心哈~~
大家一起听个蛐蛐吧，很好听的一首蛐蛐，配上面鱼师的素挺合适 ~~


歌 曲：身边有你已足够
歌 手：花见铃
(七月同图推荐歌曲)

玫の玫

破帅好银 ~~为人民服务

玫の玫

音画永久居中代码~以后就用破帅这个省事了~

楚云飞

不错啊，这样就不用来回调整叻，非常给力~~

楚云飞

下次发布帖子，必须要测试一下，破帅辛苦哈~

玫の玫

奖励破帅上个小吊挂~~

呼吸

音画永久居中代码真不错  谢谢淥詶帅弟分享 辛苦了哈！