王洪林个人官网

标题: 视频背景的样式使用内嵌样式写法[附加写了MP3和MP4直接编辑器插入且循环播放] [打印本页]

作者: admin 时间: 2023-7-1 08:03
标题: 视频背景的样式使用内嵌样式写法[附加写了MP3和MP4直接编辑器插入且循环播放]

视频背景的样式使用内嵌样式写法

[附加写了MP3和MP4直接编辑器插入且循环播放]

要将视频背景的样式使用内嵌样式写法，可以在<div id="video-background">标签上添加style属性，并设置相应的样式规则。以下是示例代码：

<!DOCTYPE html>
<html>
  <body>
<div id="video-background" style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; overflow: hidden;">
   <video autoplay loop muted playsinline id="video-foreground" style="width: 100%; height: 100%; object-fit: cover;">
      <source src="your-video.mp4" type="video/mp4">
   </video>
</div>

<div class="content">
   
</div>
  </body>
</html>

在上面的代码中，将需要的样式规则直接写在style属性中，以内嵌样式的形式实现。例如，position: fixed;用来设置固定定位，top: 0; left: 0;用来设置位置为页面左上角，width: 100%; height: 100%;用来设置宽度和高度为100%（即铺满整个窗口），z-index: -1;用来将视频背景置于最底层，overflow: hidden;用来隐藏溢出的内容。
视频标签<video>也可以通过内嵌样式来设置样式规则。例如，width: 100%; height: 100%;设置视频宽度和高度为100%，object-fit: cover;用来保持视频在容器中完全填充。
请注意，你需要将your-video.mp4替换为你自己的视频文件路径。

另外，今日在后台添加mp3和mp4直接在编辑器插入播放插件；并且自动循环播放：

[mp3]https://downsc.chinaz.net/Files/DownLoad/sound1/202305/y1812.mp3[/mp3]

[mp4]https://www.boaoforum.org/u/cms/www/201603/21104056mhqz.mp4[/mp4]

欢迎光临王洪林个人官网 (http://gamart.net/)