Question

反正我可以在css文件中放置视频背景吗？

google

 .home-sec {
    padding-top: 10px;
    padding-bottom: 60px;
    background: url(../vdc-video.MP4) no-repeat;
    padding: 0;
    -webkit-background-size: cover;
    background-size: cover;
    color: #fff;
    background-attachment: fixed;
}

不确定我是否可以使用该语法。

Answer 1

You cant include video source in the css so what you do is to add video in your body then set autoplay ,mute the video then loop. Make the video fixed to prevent scroll

<video autoplay muted loop id="bgvideo">
  <source src="https://www.w3schools.com/howto/rain.mp4" type="video/mp4">
</video>


<div class="content">
  <h1>content</h1>
  <p>Check background</p>
</div>

css

#myVideo {
  position: fixed;
  right: 0;
  bottom: 0;
  min-width: 100%; 
  min-height: 100%;
}
.content {
  position: fixed;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  color: #f1f1f1;
  width: 100%;
  padding: 20px;
  height:100%;
}

Answer 2

您不能使用CSS播放视频。 CSS可以定义什么形状以及它在HTML页面中的位置。但是，HTML是视频实际播放的地方。

https://www.w3schools.com/howto/howto_css_fullscreen_video.asp是学习如何运行视频的好地方。

请注意，良好的做法是为用户提供观看视频或不观看视频的选项。其背后的原因是数据消耗。有很多人没有无限的数据计划，而视频则吞噬大量数据。

需要背景CSS视频帮助

2 个答案: