AI摘要：本文介绍HTML页面添加背景与音乐的方法：用CSS设置图片背景；通过video标签结合固定定位与负层级实现视频背景，并附兼容代码；最后提供audio标签实现自动循环播放背景音乐。

Powered by Paimom - 派蒙.

前言

有些模板需要表头插入图片背景，经测试插入GIF或者视频都是可以的。

图片实现代码

图片实现就很简单了，css设置一下就行

<style> body {
        position:relative;
        background-color: #eee;
        background-image: url(图片链接);
        background-size: 100%;
        max-width: 580px;
        margin: 0 auto;
      } </style>

视频实现代码

插入视频背景一段简单的css即可
首先定义HTML的video标签
<video src="视频路径" class="bjimg" autoplay loop muted></video>
其次加入css代码引用或者直接插入都可以

.bjimg {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: -10;
      object-fit: cover;
    }

object-fit: cover; 保持原有尺寸比例。但部分内容可能被剪切。
当然也可以加入浏览器兼容代码如下

 .bjimg {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -10;
            object-fit: cover;
            /*兼容浏览器版本*/
            -webkit-background-size: cover;
            -o-background-size: cover;
            background-size: cover;
        }

添加自动播放背景音乐代码！（自动循环无播放界面哦）

直接复制下面的代码！放到你想添加音乐的页面就行了！
<audio autoplay="true" loop="true"> <source src="https://xxx.mp3"></audio>