关于html：拉伸和缩放CSS背景


Stretch and scale CSS background

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

使用CSS 3属性background-size：

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

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

相关讨论

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

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

cover表示垂直或水平拉伸图像，因此它永远不会平铺/重复。

这适用于Safari 3(或更高版本)，Chrome，Opera 10 +，Firefox 3.6+和InternetExplorer9(或更高版本)。

要使用较低版本的InternetExplorer，请尝试以下CSS：

1
2
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.myBackground.jpg', sizingMethod='scale');
-ms-filter:"progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')";
相关讨论

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

使用此标记：

1
    <img src="img.jpg" class="stretch" alt="" />

使用以下CSS：

1
2
3
4
5
6
7
8
9
10
11
12
13
#background {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0px;
    top: 0px;
    z-index: 0;
}

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

你应该完成！

为了将图像缩放为"全出血"并保持纵横比，您可以这样做：

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

它运作得很好！但是，如果裁剪了一个尺寸，它将仅在图像的一侧裁剪，而不是在两侧均匀裁剪(并居中)。我在Firefox，Webkit和InternetExplorer8中测试过它。

相关讨论

在CSS3中使用background-size属性：

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

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

我个人使用脚本来处理它使用jQuery，它是imgsizer的改编。由于我现在使用的大多数设计都使用宽度％来表示设备之间的流体布局，因此对其中一个循环略有适应(考虑到并非总是100％的尺寸)：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
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 ▼显示 e感兴趣。

相关讨论

试试文章背景大小。如果您使用以下所有内容，它将适用于除InternetExplorer之外的大多数浏览器。

1
2
3
4
5
6
7
.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%;
}
相关讨论

1
2
3
4
5
6
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支持背景大小但不支持关键字)
  • Firefox 3.6+(Firefox 4支持非供应商前缀版本)

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

1
2
3
    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撰写的这篇文章

Perfect Full Page Background Image

相关讨论

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

相关讨论

总而言之：不。拉伸图像的唯一方法是使用标记。你必须要有创意。

这个问题曾经写于2008年。今天，现代浏览器支持background-size，它解决了这个问题。请注意，IE8不支持它。

相关讨论

定义"伸展和缩放"......

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

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

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

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

如果你正在使用矢量图形，那么你恐怕不在我的专业领域之外。

相关讨论

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

1
2
3
4
5
6
7
8
9
10
11
12
13
#background {
    width: 100%;
    height: 100%;
    position: absolute;
    margin-left: 0px;
    margin-top: 0px;
    z-index: 0;
}

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

我想指出，这相当于：

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

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

相关讨论

试试这个

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

1
2
3
4
5
6
7
8
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;
}

添加background-attachment行：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
#background {
    background-attachment:fixed;
    width: 100%;
    height: 100%;
    position: absolute;
    margin-left: 0px;
    margin-top: 0px;
    z-index: 0;
}

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

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

例如：

1
2
3
4
5
6
7
8
#background {
    width: 500px;
    height: auto;
    position: absolute;
    left: 0px;
    top: 0px;
    z-index: 0;
}

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