Question

目前我使用以下CSS通过Twitter Bootstrap网站显示背景图片：

html {
    background:#505D6E url(/img/background.jpg) no-repeat center center fixed;
    min-height:100%;
    -webkit-background-size: cover;
       -moz-background-size: cover;
         -o-background-size: cover;
            background-size: cover;
}

我必须用div替换它，因为我无法应用jQuery动画将一个背景图片更改为另一个。我该如何创建全屏div？

Answer 1

这会创建一个全屏div：

HTML：

<div id="fullscreen">

</div>

CSS：

#fullscreen{
     border:1px solid black;
     height:100%;
     width: 100%;
     position: absolute; 
     top: 0; 
     left: 0;
 }

Answer 2

请使用：

<div id="backgrounddiv"></div>

#backgrounddiv {
    position: fixed;
    left: 0;
    top: 0;
    width: 100vw;
    z-index: -999; // has to be below your lowest z-index
}

然后将<img>与width: 100%和height: 100%（或任何您想要的内容）一起使用。

如何用div替换html背景图片？

2 个答案: