Question

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

Answer 1

对于现代浏览器，您可以使用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')";

Answer 2

使用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中测试了它。

Answer 3

使用CSS3中的background-size attribute：

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

编辑： Modernizr支持detection of background-size support。您可以使用编写的JavaScript变通方法，但是在没有支持的情况下，您需要它并动态加载它。这样可以保持代码的可维护性，而不需要针对某些浏览器使用侵入式CSS攻击。

我个人使用脚本来处理它使用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感兴趣。

Answer 4

试用文章 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%;
}

Answer 5

目前不是。它将在CSS 3中提供，但在大多数浏览器中实施之前需要一些时间。

Answer 6

.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支持非供应商前缀版本）

此外，您可以尝试使用ie解决方案

    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/

Answer 7

~~总之一句：不。拉伸图像的唯一方法是使用<img>标记。你必须要有创意。~~

在2008年，当答案写完时，这曾经是真实的。今天，现代浏览器支持background-size，解决了这个问题。请注意，IE8不支持它。

Answer 8

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

如果你有一个位图格式，那么拉伸它并拉动它通常不是很好（从图形上讲）。您可以使用可重复的模式来产生相同效果的错觉。例如，如果你的页面底部有一个较浅的渐变，那么你可以使用一个像素宽的图形和与容器相同的高度（或者最好更大以考虑缩放），然后将其平铺在页。同样地，如果渐变遍布页面，它将比容器高一个像素并且更宽，并在页面上重复。

通常，当容器增长或收缩时，为了使其伸展以填充容器，您可以使图像大于容器。任何重叠都不会显示在容器的边界之外。

如果你想要一个依赖于像弯曲边缘的盒子那样的效果，那么无论容器有多大，你都会将盒子的左侧粘到容器的左侧，并且有足够的重叠（在合理范围内），它永远不会用完背景，然后你用弯曲的边缘对盒子右侧的图像进行分层，并将其放置在容器的右侧。因此，当容器收缩或增长时，弯曲的盒子效果似乎随之缩小或增长 - 事实上并非如此，但它给出了正在发生的幻觉。

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

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

Answer 9

这就是我所做的。在拉伸课程中，我只是将高度更改为auto。这样你的背景图片总是与屏幕宽度相同，高度总是大小合适。

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

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

Answer 10

添加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;
}

Answer 11

我想指出这等同于：

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

Answer 12

另一个很好的解决方案是Srobbin的Backstretch，它可以应用于身体或页面上的任何元素 - http://srobbin.com/jquery-plugins/backstretch/

Answer 13

试试这个

<强> 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;
}

Answer 14

SolidSmile作弊的另一个提示是通过设置宽度并使用auto作为高度来缩放（按比例调整大小）。

前：

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

Answer 15

使用 files:ccNcs24W.s, ccUHAuzr.o and cchsVb5V.res. 属性设置图片并将其缩放到屏幕或窗口的整个边框。

拉伸和缩放CSS背景

15 个答案: