Question

我试图在（在图像下方，向下滚动）全屏幕背景图像后显示内容。我决定使用CSS3技术：

body{ 
background: url('images/body-bg.jpg') no-repeat center center fixed;
-moz-background-size: cover;
-webkit-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

以下是codepen：Link

我在上面的笔中所做的是：

.content{
  width:100%;
  background-color:#fff;
  position:absolute;
  top:100%;
  left:0;
  text-align: center;
}

这是HTML：

<html>
  <body>
    <header>My title</header>
    <div class="content">My content starts from here</div>
  </body>
</html>

我的问题是，在图像下方（向下滚动）背景图像后，为内容设置样式的最佳方法是什么？

Answer 1

使用jQuery

var winH = $(window).height();
var winW = $(window).width();
$("body").css("background-size",winH + "px " + winW + "px" );

使用CSS在全屏背景图像后显示内容

1 个答案: