使用视频作为背景,全屏展示


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>videotitle>
    <link rel="stylesheet" href="./css/bootstrap.min.css">
    <style>
        *{
            margin:0px;
            padding: 0px;}
        .video_class{position: relative;width: 100%;height: 100%; }
        video{width: 100%;height: 100%;object-fit: cover;object-position: 100% 100%;display: inline-block }
        .bg_class{background: rgba(0,0,0,.6);width:100%;height: 100vh;position: absolute;top: 0px;left: 0px}
        .text_class{  position:absolute;
            top: 50%;
            left: 50%;
            -webkit-transform: translateX(-50%) translateY(-50%);
            -webkit-transform: translateX(-50%) translateY(-50%);
            -moz-transform: translateX(-50%) translateY(-50%);
            -ms-transform: translateX(-50%) translateY(-50%);
            transform: translateX(-50%) translateY(-50%);text-align: center}
        .btn_class{background-color: #43bc71;border:1px solid #2b9152;transition: background-color .5s ease ;cursor: pointer;display: inline-block;
            width: 200px; padding:20px;text-align: center; font-size: 24px;color: #fff;border-radius: 5px;}
        .btn_class:hover{background-color: #2b9152}
        .text_class h1{font-size: 60px; color: #fff;}
        .text_class p{font-size: 30px; color: #fff;
            padding:20px 0px;}
        .videos_res{overflow: hidden;height: 100vh;margin: 0 auto}
        .img_list li{cursor: pointer;position: relative;list-style: none;margin: 0;}
        .img_list  li img{width:100%;}
        .img_list .more_div a{display: inline-block;font-size:12px;border: 1px solid #fff;position: absolute;top: 50%;left: 50%;margin-left: -60px;margin-top: -20px;
            width: 120px;text-align: center;opacity: 0;background: #fff;color: #000;height:40px;line-height: 40px;text-decoration: none;}
        .img_list .more_div{position:absolute;width: 100%;height: 100%;left:0;top:0;opacity: 0;padding: 20px;
            border:10px solid #fff;}
        .img_list li:hover .more_div{background-color:rgba(0,0,0,.7);transition: opacity .5s 0s ease-in-out;opacity: 1;border: 3px solid red; border:17px solid #fff}
        .img_list li:hover .more_div a{transition: opacity .5s 0s ease-in-out;opacity: 1 }
       .img_list .box_show{width: 100%;height: 100%;  padding:20px;}
        .del_class{padding: 0px}

    style>
head>
<body>
    <div class="contact">
            <div class="video_class">
                <div class="videos_res">
                <video preload="metadata" autoplay loop >
                    <source src="./video/pi_video.mp4" type="video/mp4">
                video>
                div>
                <div class="bg_class">div>
                <div class="text_class">
                    <h1>I'm The Kingh1>
                    <p>  Start your Website, with Bookmark’s Website Builderp>
                    <p> MAKE YOUR MARKp>
                    <a class="btn_class">start nowa>
                div>
            div>

    div>

    <div class="container_fluid" style="padding:50px 0px ;">
        <div class="col-lg-10 col-lg-offset-1 col-md-12">
            <ul class="img_list">
                <li class="col-md-4 col-sm-6 col-xs-12 del_class">
                    <div class="box_show">
                          <img src="./img/a.jpg" class="img-responsive">
                           <div class="more_div">
                               <a>morea>
                           div>
                    div>
                li>

                <li class="col-md-4 col-sm-6 col-xs-12 del_class">
                    <div class="box_show">
                        <img src="./img/b.jpg" class="img-responsive">
                        <div class="more_div">
                            <a>morea>
                        div>
                    div>
                li>

                <li class="col-md-4 col-sm-6 col-xs-12 del_class">
                    <div class="box_show">
                        <img src="./img/c.jpg" class="img-responsive">
                        <div class="more_div">
                            <a>morea>
                        div>
                    div>
                li>

                <li class="col-md-4 col-sm-6 col-xs-12 del_class">
                    <div class="box_show">
                        <img src="./img/a.jpg" class="img-responsive">
                        <div class="more_div">
                            <a>morea>
                        div>
                    div>
                li>
                <li class="col-md-4 col-sm-6 col-xs-12 del_class">
                    <div class="box_show">
                        <img src="./img/b.jpg" class="img-responsive">
                        <div class="more_div">
                            <a>morea>
                        div>
                    div>
                li>
                <li class="col-md-4 col-sm-6 col-xs-12 del_class">
                    <div class="box_show">
                        <img src="./img/c.jpg" class="img-responsive">
                        <div class="more_div">
                            <a>morea>
                        div>
                    div>
                li>
            ul>
        div>
    div>



body>
html>
这个demo是可以直接拿来用的  大家可以学习下vh(窗口的可视单位,兼容性不是很好,慎用)  单位的用法,会发现  我们前端的开发中  
不仅仅只有px  em,rem,百分比等来设置变量,接触新的东西会非常有趣,如果有什么错误的地方欢迎指正,
一起共勉。
这里用到了bootstrap框架,想要直接用这个例子,记得下载bootStrap ,它的官网即可下载

你可能感兴趣的:(前端技术类文章)