Question

我想在我的网站背景上添加动画或gify图像（医生治疗专利），任何人都可以建议我使用一些解决方案，它是一个单页网站：http://bighealth.co.in/

Answer 1

你可以这样做：

将网址更改为您想要的GIF
更改background-size: cover;以修改您想要展示的方式

body{
    background-image: url('https://www.nasa.gov/sites/default/files/thumbnails/image/dscovrepicmoontransitfull.gif');
    /* background-size: cover; */
}

Answer 2

如果你想要“高清晰度”动画，你需要添加视频作为背景，如果你的意思是，那么你需要提供3种类型的视频（.mp4，.ogg（或.ovg），webm），实际上.mp4就足够了，但在所有brwosers中都不会100％工作，无论如何这里是代码：

.fullscreen-bg {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: hidden;
  z-index: -100;
}

.fullscreen-bg__video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

@media (min-aspect-ratio: 16/9) {
  .fullscreen-bg__video {
    height: 300%;
    top: -100%;
  }
}

@media (max-aspect-ratio: 16/9) {
  .fullscreen-bg__video {
    width: 300%;
    left: -100%;
  }
}

@media (max-width: 767px) {
  .fullscreen-bg {
    background: url('../img/videoframe.jpg') center center / cover no-repeat;
  }

  .fullscreen-bg__video {
    display: none;
  }
}

<div class="fullscreen-bg">
        <video loop muted autoplay poster="img/videoframe.jpg" class="fullscreen-bg__video">
            <source src="http://dev2.slicejack.com/fullscreen-video-demo/video/big_buck_bunny.mp4" type="video/mp4">
            <source src="http://dev2.slicejack.com/fullscreen-video-demo/video/big_buck_bunny.ogv" type="video/ogg">
            <source src="http://dev2.slicejack.com/fullscreen-video-demo/video/big_buck_bunny.webm" type="video/webm">
        </video>
    </div>

    <div class="content">
        <h1>Full screen HTML5 video background</h1>
        <p>Lorem ipsum dolor sit amet, vix te quidam commodo placerat. Mei ne dicunt minimum disputationi, purto everti adolescens id cum, quis veritus cotidieque eum ex. Ea eirmod atomorum posidonium sed, splendide dissentiunt an mel. Dolorem suavitate voluptatibus pro no. No duo conceptam cotidieque.</p>
        <p>Pro novum argumentum ad. Vix at inani civibus, congue veritus probatus ad vel. Eam ne quis omnesque euripidis, pri ea dicat etiam ponderum. At sit harum dolor persius, eos vocent adipisci ad, magna movet audiam pri no. Erant labores incorrupte id sit, constituto scripserit theophrastus quo no.</p>
        <p>Nam tacimates laboramus cu. Graeco tritani mel no. Iriure constituam mea te, quo integre salutatus ne. Case tota dicam te eam, quis minim assentior ei cum, sea eu verterem liberavisse. Modus officiis fabellas ea eos, in vis omittam ocurreret. Ea labitur assentior vix.</p>
        <p>Case tation integre sit an. Te cum mollis vocent similique, docendi volumus eu nam. Erant euismod partiendo nec ei. Vel malorum liberavisse cu. Fabulas efficiantur in duo.</p>
        <p>Ad qui brute fabulas rationibus, ex virtute omnesque vituperata vix. Ne case verterem probatus sit. In eam nulla tation debitis, has te alterum equidem definiebas. At summo facilisis eum. Vel ad nostro discere oportere, ad quod vitae officiis quo.</p>
        <p>Case tation integre sit an. Te cum mollis vocent similique, docendi volumus eu nam. Erant euismod partiendo nec ei. Vel malorum liberavisse cu. Fabulas efficiantur in duo.Ad qui brute fabulas rationibus, ex virtute omnesque vituperata vix. Ne case verterem probatus sit. In eam nulla tation debitis, has te alterum equidem definiebas. At summo facilisis eum. Vel ad nostro discere oportere, ad quod vitae officiis quo.</p>
    </div>

（单击整页版本以查看代码运行良好，如果运行代码段在此处不起作用，或访问original source here）

此代码的来源以及此处提供的更多说明：https://slicejack.com/fullscreen-html5-video-background-css/

想在我的网站背景上添加动画或gify图像

2 个答案: