拉伸和缩放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%; }
你应该完成！
为了将图像缩放为“全面stream血”并保持宽高比，您可以改为：
.stretch { min-width:100%; min-height:100%; width:auto; height:auto; }
它工作得非常好！ 但是，如果裁剪了一个尺寸，则只会在图像的一侧裁剪，而不是在两侧（和居中）均匀裁剪。 我已经在Firefox， Webkit和Internet Explorer 8中testing过了。
在CSS3中使用background-size属性 ：
.class { background-image: url(bg.gif); background-size: 100%; }
编辑： Modernizr支持检测背景大小的支持 。 您可以使用JavaScript解决方法书写，但是如果您不需要支持，则可以dynamic加载它。 这将保持代码可维护，而不诉诸某些浏览器的侵入性CSS黑客入侵。
我个人使用脚本来处理它使用jQuery，它是一个imgsizer的适应。 由于我现在使用的大多数devise都是使用宽度％来进行跨设备的stream体布局，所以对其中一个循环稍作调整（考虑到并非总是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]电子 。
尝试文章背景大小 。 如果您使用以下所有内容，则可以在除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+
- 铬无论+
- IE 9+
- 歌剧10+（歌剧9.5支持背景大小，但不是关键字）
- Firefox 3.6+（Firefox 4支持非供应商前缀版本）
另外，你可以试试这个解决scheme
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/
定义“拉伸和缩放”…
如果你有一个位图格式，通常不是很好（用graphics来说）来拉伸它并拉动它。 你可以使用可重复的模式来给出同样效果的错觉。 例如，如果您的页面底部有一个渐变渐变，那么您将使用一个宽度为单个像素且高度与您的容器相同的graphics（或者最好是较大的来缩放），然后将其平铺页。 同样，如果渐变横跨页面，它将比您的容器高一个像素，并在页面上重复。
一般来说，当容器长大或缩小时，为了给容器填充容器的幻觉，使图像比容器大。 任何重叠不会显示在容器的边界之外。
如果你想要的效果依赖于像边框弯曲的东西，那么你会把你的盒子的左边粘到容器的左边，并且有足够的重叠（在合理范围内），不pipe容器有多大，它永远不会用尽了背景，然后将曲面边框的右侧图像放在容器的右侧。 因此，随着容器的收缩或增长，弯曲的盒子效应似乎会随之缩小或增大 – 事实上并不是这样，但它给人的幻觉就是发生了什么。
至于真正使图像收缩和与容器一起成长，您将需要使用一些分层技巧，使图像看起来作为背景和一些JavaScript来调整容器的大小。 目前没有这样做的CSS的方式…
如果你使用的是vectorgraphics，你恐怕已经超出了我的专业领域。
总之一句话：不。 拉伸图像的唯一方法是使用 <img>标签。你必须有创意。
这个答案在2008年曾经是真实的。 今天，现代浏览器支持解决这个问题的background-size 。 请注意，IE8不支持它。
这是我所做的。 在弹力class，我只是改变了高度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. */}
另一个很好的解决scheme是Srobbin的Backstretch，可以应用于身体或网页上的任何元素 – http://srobbin.com/jquery-plugins/backstretch/
尝试这个
body { background: url(i/40/1639647.jpg) no-repeat fixed; background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; }
SolidSmile作弊的另外一个技巧是通过设置宽度来缩放（比例重新resize），并使用auto来设置高度。
例如：
#background { width: 500px; height: auto; position: absolute; left: 0px; top: 0px; z-index: 0; }
使用border-image : yourimage属性设置图像并将其缩放到屏幕或窗口的整个边框。
