HTML/CSS 背景图像不显示？答案

【问题标题】：HTML/CSS background-image not displaying?HTML/CSS 背景图像不显示？
【发布时间】：2013-02-10 10:46:29
【问题描述】：

我只是想设置我的背景，但这张图片不起作用。它的大小在 15 到 20MB 之间，所以我试着把它变成 5MB。仍然没有运气。我制作了一个非常小的图像，大小为 25 KB，并且效果很好，但只是重复了一遍。我的本地主机也不会显示大图像。有什么限制吗？我需要做什么才能获得完整的图像页面？

body {
    background-image:url(background.jpg);
}

【问题讨论】：

并不是真正的问题，但您需要优化您的图像。对于一张图片来说，即使是 5 兆字节也太大了，即使对于清晰详细的背景也是如此。

标签： html css background-image fullscreen

【解决方案1】：

这样做是为了避免重复图像：

body
{
    background-image:url(background.jpg);
    background-repeat:no-repeat;
}

您也可以像这样尝试background-size: cover：

body
{
    background-image: url("http://www.google.com/doodle4google/images/carousel-winner2012.jpg");
    background-repeat: no-repeat;
    background-position: center center;
    -moz-background-size: cover;
    -webkit-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-attachment: fixed;
}

这是 JS Bin 的一个演示，以漂亮的 Doodle 4 Google 作为背景图像来测试行为：

http://jsbin.com/ivexah/2

【讨论】：

谢谢，我刚刚把它做成了 1284x1024，看起来很棒！

【解决方案2】：

您需要为 body 指定宽度和高度。例如：

html, body {
   width: 100%; 
   height: 100%;
}

【讨论】：

【解决方案3】：

您可以使用简写background css 属性：

background: url(background.jpg) no-repeat;

此外，您的 body 可能没有 100% 的高度，因为您的页面上没有内容。将您的 html 和 body 设置为 100% 的高度，或者向您的页面添加更多内容。

要使背景图像覆盖其整个容器，请使用background-size：

background-size: cover;

IE8 及更低版本不支持此功能。对于那些浏览器，您需要一个 javascript 后备。 css-tricks.com 上的 excellent article 展示了不同的技术。

【讨论】：

【解决方案4】：

您的背景图片不应有任何“大小”限制。很可能，您的文件太大，以至于您没有等待足够长的时间来加载它，或者您没有设置宽度和高度。如果没有尺寸，您尝试加载背景图像的元素 tahat 基本上将具有 0px x 0px 的大小。请参阅以下 jsfiddle 示例：

http://jsfiddle.net/GymxW/1/

HTML：

<div class="container"></div>

CSS：

.container {
    width: 400px;
    height: 100px;
    background-image: url(http://dummyimage.com/400x100/4d494d/686a82.gif&amp;text=background+image);
    background-repeat: none;
    background-position: 0 0;
}

重要提示：如果您希望将图像“拉伸”到视口的全尺寸，一个简单的解决方案是使用插件，例如Backstretch。

【讨论】：