AI摘要：文章介绍了如何在HTML中插入图片或视频作为背景。通过CSS设置`background-image`属性可以轻松实现图片背景，而使用`

前言

有些模板需要表头插入图片背景，经测试插入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>

HTMl插入图片或视频背景

前言

图片实现代码

视频实现代码

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

评论