这是我体内的html
此代码适用于覆盖 div 并在顶部覆盖的视频。我可以使用帮助,因为视频不会出现在 chrome 中。我试过使用 webm。文件和 ogv 但它不工作。
感谢您提供任何帮助。
<section>
<div class="jumbotron jumbotron-fluid" id="hero">
<div class="container">
<h3 class="hero-subtitle">Lorem Ipsum</h1>
<p class="hero-content">The main content goes here </p>
<br>
<h6 class="hero-excerpt">subtitle </h6>
</div>
</div>
</section>
CSS 页面
#hero {
min-height: 70vh;
background:
/* top, transparent red, faked with gradient */
linear-gradient(
rgba(0, 0, 0, 0.85),
rgba(0, 0, 0, 0.45)
),
/* bottom, image */
url('background_video.mp4');
background-position: center;
background-repeat: no-repeat;
background-size: cover;
color: white;
.hero-subtitle {
font-size: 2rem;
font-weight: 300;
line-height: 1.2;
}
.hero-content{
font-size: 1.25rem;
font-weight: 300;
}
.hero-excerpt{
font-size: 1rem;
font-weight: 300;
}
}
最佳答案
url('background_video.mp4')
您不能直接将视频文件用作背景图像。 url
css data type在 background
中使用时样式设置为 background-image
属性(property)。因此,该属性的 url 需要指向图像,而不是视频文件。
跨浏览器解决方案
如果您希望您的视频作为某个元素的背景播放,您需要将其放入包含您想要的内容的容器中。用 positioning it with position:absolute
覆盖它并设置适当的 z-indexes :
.container {
position:relative;
width:320px;
height:180px;
}
.container video {
position:absolute;
width:320px;
height:180px;
left:0px;
top:0px;
z-index:1;
}
.container .content {
position:relative;
width:320px;
height:180px;
z-index:2;
background-color:rgba(0,0,0,0.7);
color:white;
line-height:180px;
text-align:center;
}
<div class="container">
<video autoplay muted src="http://download.blender.org/peach/bigbuckbunny_movies/BigBuckBunny_320x180.mp4"></video>
<div class="content">Some content</div>
</div>
仅限 Firefox(截至 2018 年 6 月)
在 firefox 中你可以使用另一个元素作为 background-image
, 所以在这种情况下你可以使用 <video>
元素作为背景。使用浏览器前缀函数element() .当传递元素的 css id 选择器时,它将使用该元素作为背景
#content {
width:320px;
height:180px;
background-image:-moz-element(#backgroundvideo);
line-height:180px;
text-align:center;
color:white;
}
<video style="display:none;" autoplay muted id="backgroundvideo" src="http://download.blender.org/peach/bigbuckbunny_movies/BigBuckBunny_320x180.mp4"></video>
<div id="content">Some content</div>
关于javascript - Chrome 中不显示视频背景,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51091929/