使用CSS实现大背景图片

Question

使用CSS实现大背景图片

css

4

如何使用CSS加载图片以覆盖整个背景，就像一些网站那样。不是通常的background-image属性，而是要快速加载图片。

示例：

http://www.marinayachting.it/

http://alexandraowen.co.nz/

- X10nD

你能举个例子吗？ - Michael Haren

这个图像是一个小图案还是一张大图？（例如1024x768） - CastleDweller

假设它适合略大于1024x768的屏幕，例如Bing，它具有高分辨率图像。 - X10nD

3

如果您使用Firebug检查bing.com的CSS，您会发现它使用了"background-image"。请检查具有"id="bgDiv""的div。 - jasongetsdown

2

如果你有 Photoshop，请确保使用“保存为 Web”选项将文件压缩到合理的大小。 - Jason

你是指CSS背景与img标签加载图像的方式不同吗？我注意到在某些浏览器版本中，虽然img标签会逐行显示正在加载的图像，但css背景只有在图像加载完成后一次性显示全部内容。 - JAL

8个回答

7

让背景图片快速加载并没有什么神奇的方法，你只需要：

拥有一个快速的服务器。
尽可能压缩图片。
使页面HTML尽可能小，以便其他内容可以尽快开始加载。
不要有太多其他需要加载的图片。
不要有太多需要加载的脚本和其他外部文件。

- Guffa

5

为什么会有人点踩呢？如果你不说出认为哪里有问题，那么回答也无法得到改进。 - Guffa

4

我发现这篇教程很有帮助。-> http://css-tricks.com/perfect-full-page-background-image/

- JGrubb

1

Bing正在加载一个固定大小的普通背景图片。对我来说速度不是特别快，但也许它看起来很快是因为在第一次加载后该图片已被缓存。

- jeroen

几乎所有答案都被踩，这是怎么回事？能否解释一下… - jeroen

1

您可以将样式设置为内联，以便图像可以开始下载，而无需等待任何CSS文件准备就绪。

- gblazex

1

能否给我点赞者提供个理由？或者你不知道你在做什么，只是有太多的空闲时间了... - gblazex

0

在您的第二个示例网站alexandraowen.co.nz中，如果您花费一点时间查看他们使用的JS代码，您会发现以下内容：

// 背景 --------------------------------------------------------------//

var 背景 = {};

背景.init = function() {

$('body').each ( function() { var imgsrc = $(this).css('background-image'); if(imgsrc != 'none') { imgsrc = imgsrc.slice( imgsrc.indexOf('(') + 1 , -1); $(this).css('background-image', 'none'); $(this).prepend(''); if($.browser.msie) { // ie 7 is the slow kid and we have to strip out quote marks ffs! $(this).find('div.bg img').attr('src', imgsrc.split('"').join('')); } else { $(this).find('div.bg img').attr('src', imgsrc); } } } ); 背景.resizeHandler(); $(window).resize(背景.resizeHandler); $('div.bg img').load(背景.resizeHandler); }

背景.resizeHandler = function() { var w = $(window).width(); var h = $(window).height();

$('div.bg img').each ( function() { var wr = w / $(this).width(); var hr = h / $(this).height(); var r = Math.max(wr, hr); var imgw = Math.round($(this).width() * r); var imgh = Math.round($(this).height() * r);

$(this).width( imgw ); $(this).height( imgh );

var l = Math.round((w/2) - (imgw/2)); $(this).css('margin-left', l+'px'); } ); }

除了页面上的HTML：

<body style="background-image: none; ">

如果你深入挖掘他们的脚本，你就可以看到他们做了什么。但我保证它根本不比只设置 background-image 属性更快。

- Jason

1

我相信这里的每个人都不喜欢你毫无理由地给别人点踩。 - Jason

0

如果您将一张图片（比如一幅图片）设置为背景，您需要使其足够大以适应大屏幕尺寸。您不希望在您的网站上体验到的情况是，您的图片在屏幕上重复多次。最小宽度可能应该为1260像素。如果背景只是一个简单的渐变，您可以在Photoshop中剪切其中一部分，并将其应用于body，例如：

body {
margin:0;
padding:0;
background:#fff url(your/image/location.jpg) repeat-x scroll 0 0;
}

这种方法也可以应用于div，祝好运。

- Gil

0

<img id="foo" src="bar" alt=""> 和 #foo { width: 100%; height: 100%; }
(如需所需层叠，请使用position： absolute; / position： relative; 和z-index)

这是一个旧的示例。

- reisio

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- jasongetsdown · Accepted Answer

background-image 是 CSS 中放置图像的唯一方法。如果您想让它非常大，请将其放在 body 元素或填充整个视口的容器 div 上。

body {
    margin: 0;
    padding: 0;
    width: 100%;
    background-image: url('my_big_image.jpg') norepeat;
}

如果你使用一个容器div，可以设置position:fixed;top:0;left:0，这样图片在页面滚动时会保持不动。

没有什么神奇的。如果它不重复，想要让它快速加载，我认为你没有太多可做的。如果它重复了，请确保你的图片大小与一个模块的大小相同。这可能只有一个像素高或者宽，具体取决于内容。