Question

我有一个网站，它使用图片作为整个页面的背景。为了做到这一点，我使用新的CSS3规范“background-size”，它设置为“cover”。

background-image: url(/images/House-Remodel-Ideas2.jpg);
background-repeat: no-repeat;
background-size: cover;

一般来说这很好用，但我注意到如果窗口开始变得太窄（这是一个相当宽的图像，所以即使1024x768“太窄”）然后图像停止填充页面而我看到页面的背景颜色。

这种破坏了页面的外观。虽然我认为我可以对图像的大小和页面的整体设计都有所了解，但如果按预期工作则会很好。我很好，图像溢出或被剪裁，但我不太好，它太小，留下页面背景显示。

有没有办法设置它以便不会发生？

请求了一个例子，所以......这是我正在使用的图像： http://i.imgur.com/igLMC.jpg

这是HTML：

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body {
    background-image: url(house.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-color: red;
}
</style>
</head>
<body>
</body>
</html>

我在图像后面放了一个令人讨厌的红色背景来演示这个问题。如果它正常工作，你不应该看到红色。所以运行上面的操作，然后调整浏览器的大小，使其非常薄，又高。你会在图片下面看到很多红色。这就是问题所在。

作为更新，经过更多测试，删除DOCTYPE似乎可以解决问题。我不够聪明，不能告诉你原因。：）

Answer 1

我还没有实现一种只用css的方法来做这件事，但我确实使用了一次backstretch jQuery插件，并且它可以全面运行。 http://srobbin.com/blog/easy-full-screen-background-images-with-jquery/

Answer 2

只需设置height的{{1}}或min-height：

html

html {
  min-height: 100%;
}
body {
    background-image: url(http://i.imgur.com/igLMC.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-color: red
}

CSS3背景大小 - 我能保证报道吗？

2 个答案: