在背景中拉伸和缩放CSS图像-仅使用CSS

我希望我的背景图像根据浏览器视口大小进行拉伸和缩放。

我在Stack Overflow上看到了一些可以完成这项工作的问题，例如拉伸和缩放CSS背景。它运行良好，但我想使用background放置图像，而不是使用img标记。

其中放置了img标签，然后使用CSS向img标签致敬。

width:100%; height:100%;

它有效，但这个问题有点老，并且在CSS 3中说明调整背景图像的大小将非常有效。我试过这个例如第一个，但它不适合我。

有没有一个好的方法来使用background-image声明？

1880631 次浏览
小开

您想仅使用一张图像来实现这一目标吗？因为您实际上可以使用两张图像制作类似于拉伸背景的东西。例如，PNG图像。

我以前做过这个，并不难。此外，我认为拉伸只会损害背景的质量。如果你添加一个巨大的图像，它会减慢速度的计算机和浏览器。

小开

您实际上可以使用img标签实现与背景图像相同的效果。您只需将其z索引设置为低于其他所有内容，设置位置：绝对并为前景中的每个框使用透明背景。

小开

使用我提到的代码…

超文本标记语言

<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%;}

这会产生所需的效果：只有内容会滚动，而不是背景。

对于任何屏幕尺寸，背景图像都会根据浏览器视口调整大小。当内容不适合浏览器视口并且用户需要滚动页面时，背景图像会在内容滚动时保持固定在视口中。

使用CSS 3，这似乎要容易得多。

小开

谢谢！

但后来它不适用于GoogleChrome和Safari浏览器（拉伸工作，但图片的高度只有2毫米！），直到有人告诉我缺少什么：

尝试设置height:auto;min-height:100%;

所以改变你的height:100%;行，给出：

#### #background {width: 100%;height: 100%;position: fixed;left: 0px;top: 0px;z-index: -1;}
.stretch {width:100%;height:auto;min-height:100%;}

就在新添加的代码之前，我在我的Drupal天杜主题style.css中有这个：

html， body{高度： 100%；}

#页面{背景：#ffffff；高度：自动！重要；高度： 100%；最小高度： 100%；位置：相对；}

然后我必须在Drupal中使用图片制作一个新块，同时添加class=stretch：

只是用Drupal块中的编辑器复制图片是行不通的；必须将编辑器更改为非格式化文本。

小开

我想居中缩放背景图像，而不是将其拉伸到整个页面，并且我希望保持长宽比。由于其他答案中建议的变化，这对我很有效：

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

<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%;}
小开

您可以使用CSS3属性来做得很好。它根据比例调整大小，因此不会出现图像失真（尽管它会放大小图像）。请注意，它还没有在所有浏览器中实现。

background-size: 100%;
小开

使用此CSS：

background: url('img.png') no-repeat;background-size: 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>

同样，Internet Explorer是这里的坏人，因为它不识别用户选择选项-甚至Internet Explorer 10预览都不支持它，所以您可以选择使用JavaScript来防止背景图像选择（例如，http://www.felgall.com/jstip35.htm）或使用CSS3背景拉伸方法。

此外，对于seo，我会将背景图像放在页面底部，但如果背景图像加载时间过长（即最初使用白色背景），您可以移动到页面顶部。

小开
最佳答案

CSS3有一个名为background-size:cover的小属性。

这将缩放图像，以便背景区域完全被背景图像覆盖，同时保持长宽比。整个区域将被覆盖。但是，如果调整大小的图像的宽度/高度太大，部分图像可能不可见。

小开

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*/}
小开

我使用这个，它适用于所有浏览器：

<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>
小开

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

我为每个页面动态执行此操作。因此，我使用PHP为每个页面生成自己的超文本标记语言。所有图片都在“图像”文件夹中，并以“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、Chrome21和Firefox 14上进行了测试。

小开

使用仰泳插件。一个甚至可以有几个图像幻灯片。它也可以在容器中工作。例如，这样一个人可以只有一部分背景被背景图像覆盖。

因为即使我可以让它工作证明它是一个易于使用的插件：）。

小开

您可以将此类添加到您的CSS文件中。

.stretch {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;}

它工作在：

  • Safari3或以后
  • Chrome不管怎样
  • Internet Explorer 9或更高
  • Opera 10或更高版本（Opera 9.5支持background-size，但不支持关键字）
  • Firefox 3.6或更高版本（Firefox 4支持非供应商前缀版本）
小开 
background-size: 100% 100%;

拉伸背景以填充两个轴上的整个元素。

小开

为了根据容器大小适当缩放图像，请使用以下命令：

background-size: contain;background-repeat: no-repeat;
小开

您可以使用border-image : yourimage属性将图像向上缩放到边框。即使您提供背景图像，边框图像也会绘制在其上。

如果您的样式表在不支持CSS 3的地方实现，那么border-image属性非常有用。如果您使用的是GoogleChrome或Firefox，那么我推荐background-size:cover属性本身。

小开

它由CSS技巧解释：完美的整页背景图像

演示：https://css-tricks.com/examples/FullPageBackgroundImage/progressive.php

代码：

body {background: url(images/myBackground.jpg) no-repeat center center fixed;-webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover;}
小开

我使用了background-X CSS属性的组合来实现理想的缩放背景图像。

background-size: cover;background-repeat: no-repeat;background-position: center;background-attachment: fixed;

这使得背景始终覆盖整个浏览器窗口，并在缩放时保持居中。

小开

使用此CSS：

background-size: 100% 100%

小开

如果您想让内容水平居中，请使用这样的组合：

background-repeat: no-repeat;background-size: cover;background-position: center;

这看起来会很漂亮。

小开

下面的工作对我来说。

.back-ground {background-image: url("../assets/background.png");background-size: 100vw 100vh;}

在不同的维度上覆盖了整个背景


提交答案