Question

我想创建一个全屏图像，让我向下滚动页面，就像在苹果网站上一样。

http://www.apple.com/uk

您会注意到，通过调整浏览器的大小，图像可以全屏显示，但它允许您向下滚动到页脚。

这可以在jquery中完成还是需要javascript？

到目前为止我唯一的代码是这个css代码使图像全屏显示：

.content {
    height:100%;
    width:100%;
    background: url("http://america.aljazeera.com/content/ajam/watch/shows/the-stream/the-stream-officialblog/2013/9/16/indiana-ag-callsfordrugtestingofpregnantwomen/jcr:content/blog/mainpar/adaptiveimage/src.adapt.960.high.1379636395676.jpg") no-repeat center center fixed; 
    -webkit-background-size: cover;
       -moz-background-size: cover;
         -o-background-size: cover;
            background-size: cover;
}

这里是一个小提琴小提琴http://jsfiddle.net/XXHgJ/

如果向下滚动页脚显示但菜单保持不动，则需要向上滚动。

Answer 1

如果你只想创建一个全屏元素，可以使用jQuery：

<强> jQuery的：

function setDimensions(){
   var windowsHeight = $(window).height();
   $('#element').css('height', windowsHeight + 'px');
}

//when resizing the site, we adjust the heights of the sections
$(window).resize(function() {
    setDimensions();
});

setDimensions();

<强> CSS

.content {
    background-image: url(yourURL);
    background-size:cover;

}

生活演示：http://jsfiddle.net/XXHgJ/7/

Answer 2

它是这样的吗？...我在使用纯css后，在页面调整大小时，在苹果的那个中，用图片大小不一定会改变。

<div>

    <div style="position:relative; background:green; ">
     <div style="position:absolute; top:30px; left:50px; margin:auto; width:250px; height:40px; text-align:center; padding-top:10px; background:black; color:#fff;">Menu goes here</div>
        <div><img src="http://america.aljazeera.com/content/ajam/watch/shows/the-stream/the-stream-officialblog/2013/9/16/indiana-ag-callsfordrugtestingofpregnantwomen/jcr:content/blog/mainpar/adaptiveimage/src.adapt.960.high.1379636395676.jpg" height="400" /></div></div>

    <div style="background:#fff; padding:30px;">Footer</div>


</div>

请参阅Feddle：http://jsfiddle.net/HZbAt/

希望有所帮助

Answer 3

在我的页面上我有margin-top 80px推送内容是他们可以添加到代码的任何东西所以这不会发生像-80px？这是针对jquery脚本的

显示全屏图像100％高度和100％宽度但能够向下滚动

3 个答案: