1

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

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

4 回答 4

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

于 2013-02-09T22:13:08.203 回答
0

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

html, body {
   width: 100%; 
   height: 100%;
}
于 2013-02-09T22:13:13.347 回答
0

您可以使用速记backgroundcss 属性：

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

此外，您body的高度可能不是 100%，因为您的页面上没有内容。要么给你的html和body100% 的高度，要么给你的页面添加更多的内容。

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

background-size: cover;

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

于 2013-02-09T22:21:22.123 回答
0

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

于 2013-02-09T22:28:49.287 回答