本文介绍了我想全屏显示图像,直到滚动的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

这是我要将此全屏图像应用到的页面: http://www.alexwiley.co.uk/portfolio

Here is the page I am trying to apply this full screen image to:http://www.alexwiley.co.uk/portfolio

我希望这样做,以便图像显示100%的宽度和100%的高度,直到向下滚动为止,然后在滚动时可以看到其下方的内容.

I wish to make it so that the image displays 100% width and 100% height until you scroll down, then you can see the content below this as you scroll.

这是我要执行的操作的示例网站: http://www.nilsfrahm.com/

Here is an example site of what I am looking to do:http://www.nilsfrahm.com/

您可以看到他的图像是全屏的,直到他滚动为止.

You can see his image is fullscreen until he scrolls.

我正在Adobe Muse CC中创建此网站,就像添加的信息一样.

I am making this website in Adobe Muse CC just as added information.

推荐答案

您需要使用background-attachment:fixed;带有background-image和background-size:cover;

You need to use background-attachment: fixed; with background-image and background-size: cover;

大屏幕版本: http://codepen.io/suez/full/wulBv/

* {
  -moz-box-sizing: border-box;
       box-sizing: border-box;
  margin: 0;
}

html, body {
  height: 100%;
}

div {
  width: 100%;
  height: 100%;
}
div.first {
  background-image: url("http://i.imgur.com/PbV1Grl.jpg");
  background-attachment: fixed;
  background-size: cover;
}
div.second {
  background-image: url("http://i.imgur.com/VWYl1EC.jpg");
  background-size: cover;
}
<div class="first"></div>
<div class="second"></div>

这篇关于我想全屏显示图像,直到滚动的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

08-23 13:25