Question

目前有一个拥有自己背景的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

由于

Answer 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（仅限.js文件）下载jQuery VideoBG插件，并将其包含在HTML代码中。
```
 <script src="jquery.videoBG.js"></script>
```
将以下代码JavaScript代码添加到HTML代码中并根据您的需要进行调整（意味着不同视频格式的文件名以及应放置背景的元素的ID或类。这里我使用了班级intro-header）：
```
$('.intro-header').videoBG({
    position:"fixed",
    zIndex:-1,
    mp4:'christmas_snow.mp4',
    ogv:'christmas_snow.ogv',
    webm:'christmas_snow.webm',
    poster:'christmas_snow.jpg'
});
```

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

1 个答案: