Question

如何使用CSS加载图像以覆盖整个背景，就像某些网站一样。不是通常的背景图像属性，但我想快速加载图像。

示例：

http://www.marinayachting.it/

http://alexandraowen.co.nz/

Answer 1

我是制作marinayachting.it的人。

基本上，对于大（和缩放）背景有三种方式：使用css背景图像，拉伸<img />标记位置：固定或使用双向。

最好的方法是将css background-image与新的background-size属性一起使用。我认为Firefox（自3.6以来），Safari，Chrome和Opera都支持它（目前有供应商前缀）。坏人是（猜！）Internet Explorer。 因此，诀窍是针对IE和Firefox＆lt; 3.6通过javascript并在文档<img />事件中注入streched onready标记。

为了快速制作，请导出不大于1024px的图像（在某种图像上，甚至更小的分辨率也能正常工作），并且尺寸不超过100kb。当然，快速服务器甚至更好的CDN都会有所帮助。

请注意，版本8之前的IE以非常丑陋的方式呈现拉伸图像（线性缩放）并且是低调的！使用专有供应商css -ms-interpolation-mode:bicubic;会有所帮助，但也会让那个糟糕的浏览器更慢。为了获得最佳质量和性能，您可以使用AlphaImageLoader过滤器。是的，用于解决旧IE6中的png透明度问题。例如。 marinayachting.it的gallery部分中的背景和动画轮播都加载了AlphaImageLoader过滤器。特别是旋转木马，使用通过javascript动画的轻微拉伸pngs，在没有滤镜的情况下以0.5fps运行！

Answer 2

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，并且当页面滚动时图像将保持静止。

没有魔力。至于快速加载它我不认为如果不重复你可以做很多事情。如果它重复，那么请确保您的图像是一个模块的大小。根据内容的不同，这可能只有一个像素高或宽。

Answer 3

快速加载背景图片毫无魔力，只需：

拥有快速服务器。
尽可能压缩图像。
使您的页面HTML变小，以便其余的可以尽快开始加载。
没有许多其他图像也必须加载。
没有很多脚本和其他必须加载的外部文件。

Answer 4

我发现本教程很有帮助。 - ＆GT;

http://css-tricks.com/perfect-full-page-background-image/

Answer 5

Bing正在加载具有固定大小的普通背景图像。它不是特别快（对我来说......），但也许看起来很快，因为图像是在第一次加载后缓存的。

Answer 6

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

Answer 7

如果你设置一个图像让我们说一张图片作为背景你需要让它足够大以适应大屏幕尺寸。您不希望自己的网站体验，您的图片在屏幕上重复多次。可能至少宽度应该是1260px。如果背景只是一个简单的渐变，你可以在photoshop中剪掉一小部分并将其应用到身体上，如下所示：

身体{
余量：0;
填充：0;
background：#fff url（your / image / location.jpg）repeat-x scroll 0 0;
}

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

Answer 8

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

// backgrounds --------------------------------------------------------------//

var Backgrounds = {};

Backgrounds.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);
                }
            }
        }
    );
    Backgrounds.resizeHandler();
    $(window).resize(Backgrounds.resizeHandler);
    $('div.bg img').load(Backgrounds.resizeHandler);
}

Backgrounds.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属性更快。

Answer 9

<img id="foo" src="bar" alt="">与#foo { width: 100%; height: 100%; }的对象（使用position: absolute; / position: relative;＆amp; z-index根据需要进行分层）

Here's an old example

使用css的大背景图像

示例：

9 个答案: