background - CSS的背景- 拉伸和缩放CSS图像

  显示原文与译文双语对照的内容

我希望根据浏览器viewport大小来拉伸和缩放背景图像。

我看到了一些关于堆栈溢出的问题,比如 拉伸和缩放CSS背景 。 它工作正常,但我想用 background 来放置图像,而不是用 img 标记。

在这个例子中,放置了一个 img 标签,然后用CSS来表示 img 标记。


width:100%; height:100%;

它的工作原理,但这问题是有点老,并指出了该在 CSS 3调整背景图像的大小可以工作得还算不错 我已经尝试过这个示例,第一个是,但它对我没有作用。

使用 background-image 声明有好方法?

时间:

你可以使用CSS3属性很好地完成它。 它调整成比比,因此没有图像失真( 虽然它做的是高档的小图像) 。 注意,它还没有在所有浏览器中实现。


background-size: 100%;

使用我提到的代码

HTML


<div id="background">
 <img src="img.jpg" class="stretch" alt=""/>
</div>

CSS


#background {
 width: 100%; 
 height: 100%; 
 position: fixed; 
 left: 0px; 
 top: 0px; 
 z-index: -1;/* Ensure div tag stays behind content; -999 might work, too. */
}

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

产生所需效果: 只有内容将滚动,而不是背景。

背景图像将根据屏幕大小调整为浏览器 viewport 。 当内容不适合浏览器 viewport,并且用户需要滚动页面时,背景图像在内容滚动时仍然固定在视口中。

有了 CSS 3,这看起来会更容易。

css:


html,body {
 background: url(images/bg.jpg) no-repeat center center fixed;
 -webkit-background-size: cover;/* For WebKit*/
 -moz-background-size: cover;/* Mozilla*/
 -o-background-size: cover;/* Opera*/
 background-size: cover;/* Generic*/
}

下面的CSS部分应该用所有浏览器拉伸图像。

我为每个页面动态地执行这里操作。 因此我使用PHP为每个页面生成自己的HTML标记。 所有图片都在'图像'文件夹中,并以'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 变量,删除转义 back-slashes,调整路径并将这里代码放入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');
}

这是用 IE 9,Chrome 21和 Firefox 14测试的。

我使用它,它适用于所有浏览器:


<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 上面 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>

我想居中和缩放一个背景图像,而不把它拉伸到整个页面,我想保持宽高比。 这对我来说很有用,因为在其他答案中建议的变化:

内嵌图像:-------------------------


<div id="background">
 <img src="img.jpg" class="stretch" alt=""/>
</div>

CSS ---------------------------------


html {
 height:100%;
}

#background {
 text-align: center;
 width: 100%; 
 height: 100%; 
 position: fixed;
 left: 0px; 
 top: 0px; 
 z-index: -1;
}

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

我同意绝对div的图像,宽度和高度为 100% 。 确保在CSS中设置了 100%的宽度和高度,并将边距和填充设置为零。 在这里方法中你会发现另一个问题是,选择文本时,选择区域有时会包含背景图像,这会使整个页面具有选中的状态。 你可以使用 user-select:none CSS规则进行四舍五入,如下所示:


<html>
 <head>
 <style type="text/css">

 html,body {
 height: 100%;
 width: 100%
 margin: none;
 padding: none;
 }

 #background {
 width: 100%;
 height: 100%;
 position: fixed;
 left: 0px;
 top: 0px;
 z-index: -99999;
 -webkit-user-select: none;
 -khtml-user-select: none;
 -moz-user-select: none;
 -o-user-select: none;
 user-select: none;
 }

 #background img {
 width: 100%;
 height: 100%;
 }

 #main{ z-index:10;}
 </style>
 </head>
 <body>
 <div id="main">
 content here
 </div>
 <div id="background"><img src="bg.jpg"></div>
 </body>
</html>

同样,IE 是这里的坏家伙,因为它不认识这里user-select选项- 甚至连 IE 10 预览支持它,所以你有权的要么用JavaScript以防止( 例如 http://www.felgall.com/jstip35.htm ) 背景图像选择或者使用 CSS 3 background-stretch方法。

此外,对于搜索引擎优化我会设置一些背景图像底部的页面,但是如果要加载的背景图像的时间过长( 也就是说,最初有白色背景),你可以搬到页面的顶部。

...