我希望我的背景图像拉伸和缩放取决于浏览器视口的大小。
我在Stack Overflow上看到过一些问题，比如拉伸和缩放CSS背景。它工作得很好，但我想使用背景放置图像，而不是使用img标签。
在其中放置了一个img标签，然后用CSS向img标签致敬。
width:100%; height:100%;
它的工作，但这个问题有点老了，并指出在css3调整背景图像的大小将工作得很好。我已经尝试了第一个例子，但它不适合我。
是否有一个好的方法来做背景图像声明?
当前回答
您可以使用border-image: yourimage属性将图像缩放到边界。即使你给出了背景图像，边界图像也会被绘制在它上面。
如果你的样式表是在不支持css3的地方实现的，border-image属性是非常有用的。如果你使用谷歌Chrome或Firefox，那么我推荐使用background-size:cover属性本身。
其他回答
下面的CSS部分应该在所有浏览器上扩展图像。
我对每个页面都动态地这样做。因此，我使用PHP为每个页面生成自己的HTML标记。所有图片都在“image”文件夹中，并以“Bg.jpg”结尾。
<html style="
background: url(images/'.$pic.'Bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'images/'.$pic.'Bg.jpg\', sizingMethod=\'scale\');
-ms-filter: \"progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'images/'.$pic.'Bg.jpg\', sizingMethod=\'scale\')\
";>
如果所有页面只有一张背景图片，那么你可以删除$pic变量，删除转义反斜杠，调整路径，并将此代码放在CSS文件中。
html{
background: url(images/homeBg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/homeBg.jpg', sizingMethod='scale');
-ms-filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/homeBg', sizingMethod='scale');
}
这是在Internet Explorer 9、Chrome 21和Firefox 14上测试的。
谢谢!
但后来在谷歌Chrome和Safari浏览器上就不行了(拉伸可以，但图片的高度只有2毫米!)，直到有人告诉我缺少什么:
尝试设置高度:auto;min-height:100%;
所以根据你的身高来改变:100%;线,给:
#### #background {
width: 100%;
height: 100%;
position: fixed;
left: 0px;
top: 0px;
z-index: -1;
}
.stretch {
width:100%;
height:auto;
min-height:100%;
}
就在新添加的代码之前，我在Drupal Tendu themes style.css中有这样的代码:
html,身体{高度:100%;} 页面#{背景:# ffffff;高度:汽车!重要;高度:100%,最低高度:100%;位置:相对;}
然后，我必须在Drupal中创建一个新的块，同时添加class=stretch:
< img alt=“” class=“stretch” src=“pic.url” />
只是用Drupal块中的编辑器复制图片是行不通的;必须将编辑器更改为非格式化文本。
如果你想让内容水平居中，可以使用这样的组合:
background-repeat: no-repeat;
background-size: cover;
background-position: center;
看起来会很漂亮。
我使用这个，它适用于所有浏览器:
<html>
<head>
<title>Stretched Background Image</title>
<style type="text/css">
/* Remove margins from the 'html' and 'body' tags, and ensure the page takes up full screen height. */
html, body {height:100%; margin:0; padding:0;}
/* Set the position and dimensions of the background image. */
#page-background {position:fixed; top:0; left:0; width:100%; height:100%;}
/* Specify the position and layering for the content that needs to appear in front of the background image. Must have a higher z-index value than the background image. Also add some padding to compensate for removing the margin from the 'html' and 'body' tags. */
#content {position:relative; z-index:1; padding:10px;}
</style>
<!-- The above code doesn't work in Internet Explorer 6. To address this, we use a conditional comment to specify an alternative style sheet for IE 6. -->
<!--[if IE 6]>
<style type="text/css">
html {overflow-y:hidden;}
body {overflow-y:auto;}
#page-background {position:absolute; z-index:-1;}
#content {position:static;padding:10px;}
</style>
<![endif]-->
</head>
<body>
<div id="page-background"><img src="http://www.quackit.com/pix/milford_sound/milford_sound.jpg" width="100%" height="100%" alt="Smile"></div>
<div id="content">
<h2>Stretch that Background Image!</h2>
<p>This text appears in front of the background image. This is because we've used CSS to layer the content in front of the background image. The background image will stretch to fit your browser window. You can see the image grow and shrink as you resize your browser.</p>
<p>Go on, try it - resize your browser!</p>
</div>
</body>
</html>
为了根据容器大小适当缩放图像，请使用以下方法:
background-size: contain;
background-repeat: no-repeat;
