<legend id='0lhny96t'><style id='u83ffcpo'><dir id='aodl9w7u'><q id='r3702qjh'></q></dir></style></legend>
  • <small id='oiht1drd'></small><noframes id='5y4ybybi'>

        <bdo id='8515eo39'></bdo><ul id='vqvioj8i'></ul>

      <tfoot id='lav4rc5d'></tfoot>
    1. <i id='u4cozb14'><tr id='75dg0nb4'><dt id='7b5l1vep'><q id='sybad7w3'><span id='3fc7rwew'><b id='ycivtlkz'><form id='bofiyvmm'><ins id='4wuyi2yn'></ins><ul id='855cifor'></ul><sub id='7e889gmk'></sub></form><legend id='56tc82q0'></legend><bdo id='lv6qmpw8'><pre id='in70pap5'><center id='klo6lifs'></center></pre></bdo></b><th id='v427lrrh'></th></span></q></dt></tr></i><div id='0a5o92xw'><tfoot id='6ufa7w6x'></tfoot><dl id='skcci88d'><fieldset id='4voknq62'></fieldset></dl></div>

      1. 精准传达 • 价值共享

        洞悉互联网前沿资讯,探寻网站营销规律

        在网站建设中如何将视频设置为网页背景

        作者: 庚午网络 | 2020-12-01 11:35 |点击:

        <small id='4onsrtxq'></small><noframes id='6arg60zk'>

        • <i id='5xoq3vxk'><tr id='qyv2la65'><dt id='ypc03as1'><q id='v83mp9rc'><span id='cec57l41'><b id='mmqd9au8'><form id='lqs6k3f2'><ins id='q4ud4lt3'></ins><ul id='zw77xbxh'></ul><sub id='h33es2kj'></sub></form><legend id='9n8vuqnd'></legend><bdo id='4360g243'><pre id='dqpch2dv'><center id='pwlrx2he'></center></pre></bdo></b><th id='qgnp8kif'></th></span></q></dt></tr></i><div id='l241vyhu'><tfoot id='v6odbxxg'></tfoot><dl id='rkcd4tmc'><fieldset id='gra1v04c'></fieldset></dl></div>

        • <tfoot id='5nscnllf'></tfoot>

                <tbody id='irygejaz'></tbody>
              1. <legend id='c8x5w9a8'><style id='oj48a2i3'><dir id='e7yx7oui'><q id='ye3l77j4'></q></dir></style></legend>

                  <bdo id='1ejb27l4'></bdo><ul id='q9xqm637'></ul>
                  做网站的时候 会看到 有一些网站的背景是视频 不是图片 这样给人带来了 非常炫酷的效果 下面给大家贴出实现代码


                  有时候为一个网页添加一个动画效果的背景,会让网页增加一定的韵味,让网页看起来与众不同。

                  第一步:准备工作

                  工欲善其事必先利其器,我们首先需要准备一个视频

                  第二步:html中引入视频

                  这里我们需要用到了video/标签,然后在source里面写视频的路径,autoplay用来使其自动播放,muted用来使其静音,loop为循环播放,依照个人意愿愿意加就加,不加拉倒哈

                   
                  1. <div class="videocontainer">
                        <video class="fullscreenvideo" poster="__ROOT__/Themes/tdt/Asset/images/loginbg.jpg" id="bgvid" playsinline="" autoplay="" muted="" loop="">
                            <source src="__PUBLIC__/video/loginbg.mp4" type="video/mp4">
                        </video>
                    </div>



                  第三步:css设置,调节视频,使其适应屏幕  

                  以上的步骤还不能满足我们的需求,这个时候我们会发现有滚动条,而且视频会遮挡我们要显示的内容,可这远远不是我们想要的结果啊,不怕,有我呢
                   

                  1. .fullscreenvideo {
                        position: absolute;
                        top: 50%;
                        left: 50%;
                        min-width: 100%;
                        min-height: 100%;
                        width: auto;
                        height: auto;
                        z-index: -100;
                        -webkit-transform: translateX(-50%) translateY(-50%);
                        transform: translateX(-50%) translateY(-50%);
                        -webkit-transition: 1s opacity;
                        transition: 1s opacity;
                    }
                     
                    .videocontainer{
                        position: fixed;
                        width: 100%;
                        height: 100%;
                        overflow: hidden;
                        z-index: -100; 
                    }
                     
                    .videocontainer:before{
                        content: "";
                        position: absolute;
                        width: 100%;
                        height: 100%;
                        display: block;
                        z-index: -1;
                        top: 0;
                        left: 0;
                        background: rgba(25,29,34,.65);
                    }


                   

                  第四步:js控制视频播放速度 

                  可以利用video的playbackRate属性来控制video的播放速度,如果要让背景视频以慢速播放的话可以加上下面的javascript 

                   

                   

                  1. <script>
                        var video= document.getElementById('v1');
                        video.playbackRate = 0.5;
                    </script>


                  到这里就实现了 网页背景变成视频  可以去试一试吧

                  二度创作,如有侵权请联系删除。如没特殊注明,文章均为庚午网络原创,转载请注明https://www.hngengwu.com/gengwuwenku/521.html

                  <legend id='ey45r3a4'><style id='mhl58mr1'><dir id='a6h2fohc'><q id='8n05julf'></q></dir></style></legend>

                  <small id='hq230uck'></small><noframes id='g12yeoz8'>

                  <i id='ajsrf8ec'><tr id='hmimedy5'><dt id='8962q1dd'><q id='rtatog3k'><span id='yb2312u0'><b id='oixzuxzi'><form id='gihnxw4c'><ins id='0zdjsf0f'></ins><ul id='n2tnxtg3'></ul><sub id='jevkp3v0'></sub></form><legend id='dpn35t03'></legend><bdo id='qb32wew5'><pre id='uoz0y5d4'><center id='xm6fbxje'></center></pre></bdo></b><th id='ld82uypp'></th></span></q></dt></tr></i><div id='ppg93wmp'><tfoot id='fbjxidy7'></tfoot><dl id='2snzmkwh'><fieldset id='t8m5tt17'></fieldset></dl></div>
                    • <bdo id='roez24ka'></bdo><ul id='ihucxfzl'></ul>

                  1. <tfoot id='uknqpfz4'></tfoot>

                      多一份策划方案,总有益处。

                      请直接添加技术总监微信联系咨询

                      网站设计 品牌营销

                      多一份参考,总有益处

                      联系庚午网络,获得专属《策划方案》及报价

                      咨询相关问题或预约面谈,可以通过以下方式与我们联系

                      业务热线:18574395938 / 大客户专线:18574395938