Question

我正在一个网站上工作，我想要一个图像立即占用屏幕。我想让它占用可用的屏幕但是当你开始向下滚动时我想要一个 div 来显示文本和信息。我不介意是否只显示一些图像（如底部略有缺失）。我可以做到，但它不适用于其他分辨率。

我宁愿不使用javascript，但如果这是我不介意的唯一方式。

新另一种解释我尝试做的事情的方法是，我希望div的顶部相对于屏幕的边距，以便在所有屏幕上div显示为当你开始向下移动页面时。

Answer 1

我想你在问Parallax。

在Wiki上探讨Parallax并查看一些samples here

Answer 2

试试这个

HTML

<html>
 <body>
  <div class="imageDiv"></div>
  <div class="contentDiv">
   <h1>This is heading</h1>
   <p>This is Paragraph</p>
  </div>
 </body>
<html>

CSS

*{
  margin:0;
  padding:0;
}
html, body{
  width:100%;
  height:100%;
}
.imageDiv{
  width:100%;
  height:100%;
  background:url(http://www.hdwallpapersimages.com/wp-content/uploads/2015/06/Swing-02124.jpg) no-repeat top center #000;
}

没有使用jquery

Answer 3

听起来你正在尝试建立一个视差网站。只用css而不用java脚本就可以做到这一点。如果你看看Keith Clark的博客文章，它会给你一个好主意。 http://keithclark.co.uk/articles/pure-css-parallax-websites/

.parallax {
  perspective: 1px;
  height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;
}
.parallax__layer {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.parallax__layer--base {
  transform: translateZ(0);
}
.parallax__layer--back {
  transform: translateZ(-1px);
}


<div class="parallax">
  <div class="parallax__layer parallax__layer--back">
    ...
  </div>
  <div class="parallax__layer parallax__layer--base">
    ...
  </div>
</div>

HTML＆amp; CSS - 全屏图像

3 个答案: