zoukankan      html  css  js  c++  java
  • 将视频做为网页背景 超炫!

    想要实现这种效果很容易,只需要懂得H5的video, 按照我的步骤一步一步来就可以了~

    首先要制作我们的页面,用到的是html5的新标签video

    html :

    <video autoplayloopposter="polina.jpg"class="bgvid"id="bgvid">

    <source src="http://cdn.moji.com/websrc/video/video621.mp4" type="video/mp4">

    </video>

    css样式也没有什么好说的,只是要让视频充满屏幕、循环、无声、直接播放、隐藏按钮和不重复就可以了。

    css:

    body{

    background-color:gray;

    background:url("http://cdn.moji.com/websrc/video/video621.mp4") no-repeat center0px;

    }

    video#bgvid  {

    position: fixed; right:0; bottom:0;

    min-100%; min-height:100%; auto;height:

    auto;z-index:-100; background-size: cover;

    }

    视频背景
    用一个视频作为网页的背景,视频大小会随窗口大小变化(响应式布局)
    html代码:

    <div class="bg-video">
    <video class="v1" autoplay muted loop>
    <source src="bg.mp4">
    </video>
    </div>

    css代码:
    .bg-video{
    100%;
    height:auto;
    left:0px;
    top:0px;
    z-index: -1;
    vertical-align:bottom;display:block;
    position:absolute;
    }

    .v1{
    100%;
    height: auto;
    }

  • 相关阅读:
    python之名称空间
    python之对象(实例)
    python之类
    python之类和对象
    python之面向对象的程序设计
    python之函数联系
    Python之函数第三篇
    python之列表和生成器表达式篇
    网络基本概念
    Git
  • 原文地址:https://www.cnblogs.com/surplus/p/12339780.html
Copyright © 2011-2022 走看看