拉伸和缩放 CSS 背景

Question

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

Answer 1

使用CSS 3 属性background-size：

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

这适用于现代浏览器，自 2012 年以来。

Answer 2

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

使用 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 4

在 CSS3 中使用 background-size attribute：

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

编辑： Modernizr 支持 detection of background-size support。您可以使用编写的 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感兴趣。

Answer 5

试试文章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 6

目前没有。它将在CSS 3 中提供，但在大多数浏览器中实现它需要一些时间。

Answer 7

.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 随便+
• IE 9+
• Opera 10+（Opera 9.5 支持 background-size 但不支持关键字）
• 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 8

一句话：没有。拉伸图像的唯一方法是使用<img> 标签。你必须要有创意。

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

Answer 9

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

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

通常情况下，当容器变大或收缩时，为了让图像产生拉伸以填充容器的错觉，您可以使图像大于容器。任何重叠都不会显示在容器边界之外。

如果您想要的效果依赖于带有弯曲边缘的盒子之类的东西，那么无论容器有多大，您都可以将盒子的左侧粘贴到容器的左侧，并有足够的重叠（在合理范围内） ，它永远不会用完背景，然后您将带有弯曲边缘的盒子右侧的图像分层并将其放置在容器的右侧。因此，当容器缩小或增长时，弯曲的盒子效果似乎会随之缩小或增长 - 事实上并没有，但它给人一种错觉，那就是正在发生的事情。

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

如果你使用矢量图形，恐怕你已经超出了我的专业领域。

Answer 10

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

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

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

Answer 11

添加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 12

我想指出，这相当于做：

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

Answer 13

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

Answer 14

试试这个

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 15

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

例如：

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

Answer 16

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