HTML/CSS: 图片高度等于文档高度（而非窗口高度）

Question

我该如何达到那种效果？

- krzemian

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/上发布您的代码。请注意，不要删除HTML标签。

- Eric Fortis

---

把那个位置设为绝对定位。 ;) - Alerty

@Alerty 如果这对你有效，那很好。但在我工作的地方，我不能总是依赖于在IE6/7/8中未实现的CSS属性，特别是当差异是拉伸图像到一个单一图像居中时。 - alex

@alex：你应该为IE9的到来感到高兴。使用IE的人错过了很多东西！ - Alerty

@Alerty 他们确实是这样，但不幸的是，大多数人都存在阻碍升级的障碍，比如商业成本和对替代方案的缺乏了解。 - alex

@alex：就像英国政府被困在IE6上一样。 :P - Alerty

Answer 2

你的问题很可能源于body标签的静态定位，因此其子元素的高度相对于html标签。

尝试添加以下内容：

body{
  position:relative;
}

它将使body的子元素使用文档的大小而不是浏览器视口。

这是一个它工作的例子：http://jsfiddle.net/cP9hu/

- david

---

难道文字不应该放在图片上方吗？此外，我给你点了踩，因为我认为称呼别人的解决方案（即使是错误的）为疯狂是不礼貌的。Stack Overflow 鼓励人们友善相处。 - alex

啊哈哈，这段文本只是为了扩展内容，如果你想让它覆盖在图像上，那么就把它放在图像上方，这并不难。（将其包装在一个 div 中，并定位即可。）而你的声明虚伪的说法很可爱。 - david

@david 为了演示，你能把文字放在图片上面吗？ - alex

当然，http://jsfiddle.net/cP9hu/1/ 在文本块上使用定位，或者您可以在图像上设置负 z-index，将其放置在父元素的背景位置，就像这里 http://jsfiddle.net/cP9hu/2/，但我更喜欢避免使用 z-index 来处理此类问题。 - david

@david 你是否避免使用 z-index，因为IE7会使它们混乱？ - alex

这更多是因为z-index经常被用于可怕的hack中，而不是应该使用它的地方。如果从概念上讲，这个图像的想法是将其作为父级的背景，那么我可以使用负z-index，但否则这可能会在以后引起问题。 你经常会看到人们把z-index设置为9999;，因为他们不理解堆叠上下文的概念：http://css-discuss.incutio.com/wiki/Overlapping_And_ZIndex - david

Answer 3

如果这段代码不起作用，可能是以下原因：

CSS 代码

#theImage { height: 100%; }

使用 jQuery 可以这样：

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

我不确定如何在普通的 JavaScript 中实现这个功能，但这是一个 jQuery 的例子。

- user571545

---

如果你手头唯一的工具是锤子，那么很容易把所有东西都当成钉子来处理。不要为了这么简单的事情而使用jQuery。 - david

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

- TehCorwiz

---

如果你手头唯一的工具是锤子，那么很容易把所有东西都当成钉子来处理。不要为了这么简单的事情而使用jQuery。 - david

永远不要过度使用JavaScript。 ;) - Alerty