How to set video to opaque background in HTML

HTML method to set video to opaque background: use loop, autoplay method, directly insert relevant code [2598d817d52016c750536e0e07e4f5fca6a9c6d3f311dabb528ad355798dc27d].

The operating environment of this tutorial: windows7 system, html5 version, DELL G3 computer. This method is suitable for all brands of computers.

How to set video to opaque background in HTML:

Insert the following code first:

<video src="../video/2b.mp4" loop="loop" autoplay="autoplay"></video>

• loop means loop play

• autoplay means automatic play

css modified as follows:

<style>
body{
    margin:0;//body外边距设为0；
}
video{
    position: fixed;//视频定位方式设为固定
    right: 0;
    bottom: 0;//视频位置
    min-width: 100%;
    min-height: 100%; //不会因视频尺寸造成页面需要滚动
    width: auto;
    height: auto; //尺寸保持原视频大小
    z-index: -100; //z轴定位，小于0即可
    -webkit-filter: grayscale(20%);//添加灰度蒙版，如果设定为100%则视频显示为黑白
}
</style>

Related learning recommendations: html tutorial

The above is the detailed content of How to set video to opaque background in HTML. For more information, please follow other related articles on the PHP Chinese website!