HTML/CSS背景图像不显示？

问题描述：

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

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

手头上没有问题，但您需要优化您的图像。即使对于清晰和详细的背景，即使5兆字节对于图像来说也是太多了。 – patricksweeney 2013-02-09 22:24:19

答

做是为了避免重复图像：

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斌演示与一个美丽的Doodle 4 Google作为背景图片测试行为：

http://jsbin.com/ivexah/2

谢谢，我只是把它做成了1284x1024，它看起来很棒！ – 2013-02-10 01:54:32

答

您需要为身体分配宽度和高度。例如：

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

答

您可以使用速记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，显示不同的技术。

答

对背景图像不应有任何“大小”限制。更可能的是，你的文件太大了，以至于你没有等待足够长的时间来加载它，或者你没有设置宽度和高度。如果没有尺寸，你试图加载背景图片的元素基本上会有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。

HTML/CSS背景图像不显示？

相关推荐