HTML & CSS - 全屏图像答案

【问题标题】：HTML & CSS - Full Screen ImageHTML & CSS - 全屏图像
【发布时间】：2015-09-02 03:42:37
【问题描述】：

我正在开发一个网站，我希望图片立即占据屏幕。我想让它占据可用的屏幕，但是当你开始向下滚动时我想要一个 div 与文本和信息一起出现。我不介意是否只显示一些图像（例如底部略微丢失）。我可以，但它不适用于其他分辨率。

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

NEW 另一种解释我正在尝试做的事情的方式是，我希望 div 相对于屏幕顶部的边距，以便在所有屏幕上，div 立即出现你开始向下移动页面。

【问题讨论】：

你能告诉你代码工作吗
你能创造一个你迄今为止尝试过的小提琴吗？？

标签： css html google-chrome web

【解决方案1】：

我想你是在问视差。

在 Wiki 中探索一下 Parallax 并查看一些 samples here

【讨论】：

【解决方案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

【讨论】：

不起作用，高度变为 100%。但不是 100% 的屏幕

【解决方案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>

【讨论】：