Question

我怎样才能达到这个效果？

Answer 1

对于完整的横向和纵向尝试类似：

background-image: url(image.jpg);
background-repeat:no-repeat;
background-position:center center;
background-attachment:fixed;
-o-background-size: 100% 100%, auto;
-moz-background-size: 100% 100%, auto;
-webkit-background-size: 100% 100%, auto;
background-size: 100% 100%, auto;

或者更好地在http://jsfiddle.net/

中发布您的代码

Answer 2

您的问题很可能源于身体标记静态定位的事实，因此其子代的高度与html标记相关。

尝试添加此内容：

body{
  position:relative;
}

它会使身体的孩子使用文档的大小而不是浏览器视口。

以下是其工作示例：http://jsfiddle.net/cP9hu/

Answer 3

如果这是不合理的原因：

CSS代码

    #theImage {
        height: 100%;
    }

然后使用jQuery，你可以这样做：

    var docHeight = $(document).height();
    $('#theImage').css('height', docHeight);

我不知道如何在普通的旧JavaScript中执行此操作，但这是jQuery示例。

Answer 4

听起来像是可能需要通过JavaScript处理的东西。我个人会使用jQuery和其他东西：

$(document).ready(function() { //Runs at page load
    $(".ID_OF_IMAGE").each(function() { //calls the anon function for the id tag specified
        /*sets the height to the max of three methods of height measurement
        diff browsers detect doc height differently.*/
        this.height = Math.max(
            //gets the larger between doc height and body height
            Math.max(document.body.clientHeight, document.documentElement.clientHeight),
            Math.max(document.body.offsetHeight, document.documentElement.offsetHeight),
            Math.max(document.body.scrollHeight, document.documentElement.scrollHeight))
    });
});

或者，您可以将图像设置为div或body的背景，并使用repeat-y css属性。

body { //also works for div's
    background-image:url('image.jpg');
    background-repeat:repeat-y;
}

-SB

HTML / CSS：IMG的高度等于文档的高度（不是窗口）

4 个答案: