911

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

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

在其中放置了一个img标签，然后我们使用 CSS 向该img标签致敬。

width:100%; height:100%;

它有效，但这个问题有点老了，并指出在 CSS 3 中调整背景图像的大小会很好。我已经尝试了第一个示例，但对我来说没有用。

有没有一个好的方法来做这个background-image声明？

4

22 回答 22

1122

CSS3 有一个很好的小属性，叫做background-size:cover.

这会缩放图像，使背景区域完全被背景图像覆盖，同时保持纵横比。将覆盖整个区域。但是，如果调整后的图像的宽度/高度太大，则可能看不到部分图像。

于 2011-09-10T14:28:56.163 回答
476

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

background-size: 100%;
于 2011-02-28T00:44:54.390 回答
189

使用我提到的代码...

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

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

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

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

于 2009-07-30T18:21:26.153 回答
170

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*/
}
于 2012-03-23T19:58:51.990 回答
61 
background-size: 100% 100%;

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

于 2016-01-26T18:34:37.477 回答
42

以下 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 上测试的。

于 2012-08-06T13:41:04.823 回答
20

使用这个 CSS：

background: url('img.png') no-repeat; 
background-size: 100%;
于 2011-05-09T09:41:32.003 回答
18

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

于 2009-07-19T17:14:39.397 回答
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;
}

它适用于：

  • Safari 3 或更高版本
  • Chrome 不管是什么或以后
  • Internet Explorer 9或更高版本
  • Opera 10 或更高版本（支持 Opera 9.5 background-size，但不支持关键字）
  • Firefox 3.6 或更高版本（Firefox 4 支持非供应商前缀版本）
于 2015-04-17T07:57:41.387 回答
14

它由 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;
}
于 2017-07-28T06:29:17.743 回答
10

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

background-size: contain;
background-repeat: no-repeat;
于 2017-01-07T18:52:38.890 回答
9

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

<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>
于 2012-05-02T14:39:23.397 回答
8

谢谢！

但后来它不适用于Google Chrome和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 Tendu主题中有这个style.css：

html，正文{高度：100%;}

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

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

<img alt="" class="stretch" src="pic.url" />

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

于 2010-04-04T16:47:40.730 回答
8

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

内联图像：------------------------

<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%;
}
于 2010-12-24T13:05:04.397 回答
8

我同意绝对 div 中具有 100% 宽度和高度的图像。确保在 CSS 中为 body 设置 100% 的宽度和高度，并将边距和填充设置为零。使用此方法您会发现的另一个问题是，在选择文本时，选择区域有时会包含背景图像，这会导致整个页面处于选中状态。你可以通过使用user-select:noneCSS 规则来解决这个问题，如下所示：

<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）或使用CSS 3背景拉伸方法。

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

于 2011-07-06T10:38:11.400 回答
5

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

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

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

于 2018-11-12T04:02:39.787 回答
4

使用Backstretch插件。一个甚至可以有几张图片幻灯片。它也适用于容器。例如，这种方式可能只有背景的一部分被背景图像覆盖。

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

于 2013-09-09T23:49:24.637 回答
3

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

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

这看起来很漂亮。

于 2019-01-29T22:12:38.473 回答
3

以下对我有用。

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

可以覆盖不同维度的整个背景

于 2020-03-25T21:07:47.913 回答
1

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

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

于 2017-07-02T13:51:27.210 回答
1

使用这个 CSS：

background-size: 100% 100%

于 2018-11-19T12:29:40.250 回答
0

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

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

于 2009-07-19T16:08:21.623 回答