拉伸和缩放CSS背景

有没有办法让CSS背景延伸或缩放以填充其容器？

对于现代浏览器，您可以使用background-size以下命令完成此操作：

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

cover 表示垂直或水平拉伸图像，以使其永远不会平铺/重复。

适用于Safari 3（或更高版本），Chrome，Opera 10 +，Firefox 3.6+和Internet Explorer 9（或更高版本）。

要使其与较低版本的Internet Explorer一起使用，请尝试以下CSS：

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.myBackground.jpg', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')";

使用CSS 3属性background-size：

#my_container {
    background-size: 100% auto; /* width and height, can be %, px or whatever. */
}

自2012年以来，此功能可用于现代浏览器。

用CSS缩放图像的可能性不大，但是可以通过以下方式实现类似的效果。

使用此标记：

<div id="background">
    <img src="img.jpg" class="stretch" alt="" />
</div>

使用以下CSS：

#background {
    width: 100%; 
    height: 100%; 
    position: absolute; 
    left: 0px; 
    top: 0px; 
    z-index: 0;
}

.stretch {
    width:100%;
    height:100%;
}

并且应该完成！

为了将图像缩放为“全出血”并保持宽高比，您可以改为：

.stretch { min-width:100%; min-height:100%; width:auto; height:auto; }

效果很好！但是，如果裁切了一个尺寸，它将仅在图像的一侧裁切，而不是在两侧均等地裁切（并居中）。我已经在Firefox，Webkit和Internet Explorer 8中对其进行了测试。

在CSS3中使用background-size属性：

.class {
     background-image: url(bg.gif);
     background-size: 100%;
}

编辑： Modernizr支持检测背景大小的支持。您可以使用编写的JavaScript解决方法来工作，但是您需要它，并且在没有支持的情况下动态加载它。这将保持代码的可维护性，而无需借助某些浏览器的侵入式CSS hack。

我个人使用脚本来处理jQuery，它是imgsizer的改编版。正如我现在所做的大多数设计一样，使用宽度％表示设备间的流体布局，对其中一个回路略有适应（说明尺寸并非总是100％）：

for (var i = 0; i < images.length; i++) {
    var image = images[i],
        width = String(image.currentStyle.width);

    if (width.indexOf('%') == -1) {
        continue;
    }

    image.origWidth = image.offsetWidth;
    image.origHeight = image.offsetHeight;

    imgCache.push(image);
    c.ieAlpha(image);
    image.style.width = width;
}

编辑： 您可能还对jQuery CSS3 Finaliz [s] e感兴趣。

尝试文章background-size。如果使用以下所有选项，它将在Internet Explorer以外的大多数浏览器中运行。

.foo {
    background-image: url(bg-image.png);
    -moz-background-size: 100% 100%;
    -o-background-size: 100% 100%;
    -webkit-background-size: 100% 100%; 
    background-size: 100% 100%;
} 

不是现在。它会在CSS 3中提供，但是要在大多数浏览器中实现它需要一些时间。

.style1 {
        background: url(images/bg.jpg) no-repeat center center fixed;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
}

适用于：

• Safari 3+
• Chrome Whatever +
• IE 9+
• Opera 10+（Opera 9.5支持背景大小，但不支持关键字）
• Firefox 3.6+（Firefox 4支持非供应商前缀版本）

另外，您可以尝试此解决方案

    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.myBackground.jpg', sizingMethod='scale');
    -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')";
    zoom:1;

感谢Chris Coyier的这篇文章 http://css-tricks.com/perfect-full-page-background-image/

一言以蔽之。拉伸图像的唯一方法是使用<img>标签。您必须要有创造力。

在写答案时，这在2008年是正确的。今天，现代的浏览器支持background-size解决了这个问题。注意IE8不支持它。

定义“拉伸和缩放” ...

如果您具有位图格式，则通常无法对其进行拉伸和拉长。您可以使用可重复模式来产生相同效果的错觉。例如，如果您的渐变朝向页面底部变浅，那么您将使用一个宽度为单个像素且高度与容器相同的图形（或者最好是较大尺寸以考虑缩放），然后将其平铺在页。同样，如果渐变跨过页面，则它将比您的容器高1像素宽，然后在页面上向下重复。

通常，为了使容器扩展或收缩时，它可以拉伸以填充容器，使图像比容器大。任何重叠都不会在容器的边界之外显示。

如果您想要的效果依赖于具有弯曲边缘的盒子之类的东西，那么您应该将盒子的左侧粘贴到容器的左侧，并且要有足够的重叠，以至于（在一定程度上）无论容器有多大，它都不会用尽了背景，然后在带有弯曲边缘的框的右侧图像上分层并将其放置在容器的右侧。因此，随着容器的收缩或增长，弯曲的盒子效果似乎随之收缩或增长-实际上并没有，但它给人以错觉。

至于真正使图像随容器缩小和增长，您需要使用一些分层技巧来使图像看起来像是背景，并需要一些JavaScript来随容器调整大小。目前没有使用CSS的方法...

如果您正在使用矢量图形，恐怕您就超出了我的专业领域。

这就是我所做的。在拉伸班中，我只是将高度更改为auto。这样，您的背景图片始终具有与屏幕宽度相同的大小，并且高度始终具有正确的大小。

#background {
    width: 100%;
    height: 100%;
    position: absolute;
    margin-left: 0px;
    margin-top: 0px;
    z-index: 0;
}

.stretch {
    width:100%;
    height:auto;
}

添加background-attachment一行：

#background {
    background-attachment:fixed;
    width: 100%; 
    height: 100%; 
    position: absolute; 
    margin-left: 0px; 
    margin-top: 0px; 
    z-index: 0;
}

.stretch {
    width:100%;
    height:auto;
}

我想指出的是，这等效于：

html { width: 100%; height: 100%; }
body { width: 100%; height: 100%; /* Add background image or gradient to stretch here. */}

这里的另一个伟大的解决方案是Srobbin的终点直道可以应用到身体或任何元素在页面上- http://srobbin.com/jquery-plugins/backstretch/

尝试这个

http://jsfiddle.net/5LZ55/4/

body
{ 
    background: url(http://p1.pichost.me/i/40/1639647.jpg) no-repeat fixed; 
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
}

SolidSmile作弊的另一个技巧是通过设置宽度并使用“自动”设置高度来缩放（按比例重新调整大小）。

例如：

#background {
    width: 500px;
    height: auto;
    position: absolute; 
    left: 0px; 
    top: 0px; 
    z-index: 0;
}

使用该border-image : yourimage属性设置图像并将其缩放到屏幕或窗口的整个边框。