拉伸和缩放CSS背景

是否有一种方法来获得CSS的背景拉伸或缩放以填充它的容器?

941709 次浏览
小开

一句话:不。拉伸图像的唯一方法是使用<img>标签。你必须要有创造力。

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

小开

目前还没有。它将在CSS 3中可用，但在大多数浏览器中实现它还需要一段时间。

小开

定义“延伸和规模”…

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

通常，当容器增大或缩小时，为了给人一种它拉伸填充容器的错觉，您可以使图像比容器更大。任何重叠都不会显示在容器的边界之外。

如果你想要一个依赖于像盒子弯曲边缘的效果，那么你可以将盒子的左侧粘到容器的左侧，并有足够的重叠(在合理的范围内)，无论容器有多大，它都不会超出背景，然后你将盒子右侧的图像与弯曲边缘分层，并将其定位在容器的右侧。因此，当容器缩小或增大时，曲线盒效应似乎也随之缩小或增大——事实上并非如此，但它给人一种错觉，那就是正在发生的事情。

至于真正让图像随着容器一起缩小和增大，您需要使用一些分层技巧来使图像看起来像一个背景，并使用一些javascript来调整它与容器的大小。目前没有办法用CSS做到这一点…

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

小开

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

小开

SolidSmile作弊的另一个技巧是通过设置宽度和自动设置高度来缩放(按比例重新调整大小)。

例:

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

这就是我做的。在拉伸类中，我简单地将高度更改为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;
}
小开

在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 

.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%;
}
小开
最佳答案

对于现代浏览器，你可以通过使用background-size来实现:

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

cover表示垂直或水平拉伸图像，这样它就不会平铺/重复。

这将适用于Safari 3(或更高版本)，Chrome， 歌剧 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')";
小开

我想指出，这相当于做:

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

使用CSS 3属性background-size:

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

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

小开

另一个很好的解决方案是robbin's Backstretch，它可以应用于正文或页面上的任何元素- 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;
}
小开 
.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支持非供应商前缀版本)

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

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

这篇文章由克里斯·科耶尔 # EYZ0 < / p >

小开

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


提交答案