如何用 HTML5 CSS 视频替换 div 背景

Posted 2023-05-07

【中文标题】如何用 HTML5 CSS 视频替换 div 背景

【英文标题】：How to Replace Div Background with HTML5 CSS Video

【发布时间】：2015-03-11 20:49:24

【问题描述】：

目前有一个具有自己背景的 div，并且正在努力如何使用 CSS 将背景设置为视频。

当前设置如下：

用于 DIV 的 CSS：

.intro-header 
padding-top: 50px; /* If you're making other pages, make sure there is 50px of padding to make sure the navbar doesn't overlap content! */
padding-bottom: 50px;
text-align: center;
color: rgb(255, 255, 255);
background: url(../img/intro-bg.jpg) no-repeat center center;
background-size: cover;

DIV 的 html：

    <div class="intro-header">

    <div class="container">

        <div class="row">
            <div class="col-lg-12">
                <div class="intro-message">
                    <h2>Welcome To Little Mountain Media</h1>
                    <h1>WE BELIEVE IN THE POWER OF VISUAL MEDIA</h3>
                    <hr class="intro-divider">
                </div>
            </div>
        </div>

    </div>
</div>

如你所见，很简单，只需要一个视频来代替 into-bg.jpg

谢谢

【问题讨论】：

可能重复的问题：***.com/questions/3800813/…

任何想法如何用上面的代码实现，我正在努力> @Guillermo

【参考方案1】：

有很多方法。一种是使用jQuery VideoBG Plugin。 jQuery 是一个 javascript 框架，它包含许多有用的功能，可以使 JavaScript 开发更快、更容易。

从http://jquery.com/download/ 下载 jQuery 并将其包含到您的 HTML 代码中：

<script src="jquery-2.1.3.min.js"></script>

从 https://github.com/sydlawrence/jquery.videoBG 下载 jQuery VideoBG 插件（仅限 .js 文件）并将其包含到您的 HTML 代码中。

 <script src="jquery.videoBG.js"></script>

将以下代码 JavaScript 代码添加到您的 HTML 代码中并根据您的需要进行调整（表示不同视频格式的文件名以及应放置背景的元素的 id 或类。这里我使用了类@ 987654326@):

$('.intro-header').videoBG(
    position:"fixed",
    zIndex:-1,
    mp4:'christmas_snow.mp4',
    ogv:'christmas_snow.ogv',
    webm:'christmas_snow.webm',
    poster:'christmas_snow.jpg'
);