时间戳

首页 > 解决方案 > 引导背景图像更改为视频

html - 引导背景图像更改为视频

问题描述

以下CSS代码片段是问题：

.masthead {
  position: relative;
  width: 100%;
  height: auto;
  min-height: 35rem;
  padding: 15rem 0;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.7) 75%, 
  #000000 100%), url("/assets/img/header_flow.gif");
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: scroll;
  background-size: cover;
  }

我想将图像（目前是 GIF）更改为 mp4，但它不会出现在除 Safari 之外的任何浏览器中......？！因为它从某个地方获得了 IMG 的给定属性，所以......

改变这个的诀窍是什么？我知道还有另一种方法可以作为 HTML 中的 (<)video(>) 块，但我不想因为一小行代码而编写整个网站框架新的.. oO

编辑：

我用 HTML 解决了它

<header class="masthead">
            <div class="video-bg">
                <video muted autoplay loop source src="/assets/vid/video.webm" type="video/webm"></video> 
            </div>
                <div class="overlay"></div>
                    <div class="container d-flex h-100 align-items-center">
                        <div class="mx-auto text-center">
                            <h1 class="mx-auto my-0 text-uppercase">Title</h1>
                            <h2 class="text-white-50 mx-auto mt-2 mb-5">Subtitle</h2>
                            <a class="btn btn-primary js-scroll-trigger" href="#contactus">Contact</a>
                        </div>
                    </div>
        </header>

这对我来说并不令人满意。使用 Bootstrap 应该可以在 CSS 中更改它，否则在 CSS 中链接 bg 文件的选项非常无用。

感谢@all，即使它没有给我我搜索的解决方案：D

标签： htmlcssvideobackground

解决方案

实际上，您不能在 CSS 中为背景标签放置 MP4 文件。您必须使用 src 中的视频创建一个 div。

这是一个例子：

HTML：

<video autoplay muted loop src="path/to/video.mp4"></video>

<div class="content">
    <p>Lorem ipsum dolor sit amet, an his etiam torquatos. Tollit soleat phaedrum te duo, eum cu recteque expetendis neglegentur. Cu mentitum maiestatis persequeris pro, pri ponderum tractatos ei. Id qui nemore latine molestiae, ad mutat oblique delicatissimi pro.</p>
</div>

CSS：

video {
    position: fixed /* or absolute, depend on what you want to do */
    right: 0;
    min-width: 100%
    min-height: 100%
}

.content {
    width: 100%;
    /* And do whatever you want to do with your content */
}

https://www.w3schools.com/howto/howto_css_fullscreen_video.asp

推荐阅读