关于在背景中拉伸和缩放CSS图像：在后台拉伸和缩放CSS图像 – 仅限CSS


Stretch and scale a CSS image in the background - with CSS only

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

我看到过一些关于栈溢出的问题，例如Stretch和Scale CSS background。它工作得很好，但是我想使用background来放置图像，而不是使用img标记。

在这一个中，放置了一个img标记，然后使用css，我们向img标记进贡。

1
width:100%; height:100%;

它可以工作，但这个问题有点老了，并且指出在CSS3中调整背景图像的大小会很好地工作。我在第一个例子中试过这个例子，但对我来说没什么效果。

有没有一个好的方法来处理background-image声明？

相关讨论

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

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

相关讨论

您可以使用css3属性非常好地完成这项工作。它会根据比例调整大小，因此不会造成图像失真(尽管它会放大小图像)。请注意，它还没有在所有浏览器中实现。

1
background-size: 100%;
相关讨论

使用我提到的代码…

HTML

1
    <img src="img.jpg" class="stretch" alt="" />

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
#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，这看起来会容易得多。

相关讨论

CSS：

1
2
3
4
5
6
7
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*/
}
相关讨论

1
background-size: 100% 100%;

拉伸bg以填充两个轴上的整个元素

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

我为每一页动态地执行此操作。因此，我使用PHP为每个页面生成自己的HTML标记。所有图片都在"image"文件夹中，并以"bg.jpg"结尾。

1
2
3
4
5
6
7
8
9
<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文件。

1
2
3
4
5
6
7
8
9
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测试的。

相关讨论

使用这个CSS：

1
2
background: url('img.png') no-repeat;
background-size: 100%;
相关讨论

实际上，使用img标记可以获得与背景图像相同的效果。你只需要把它的z索引设置得比其他任何东西都低，设置position:absolute，并对前景中的每个框使用透明的背景。

相关讨论

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

1
2
3
4
5
6
7
.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或更高版本
  • 铬什么的或以后的
  • Internet Explorer 9或更高版本
  • Opera 10或更高版本(Opera 9.5支持background-size，但不支持关键字)
  • firefox 3.6或更高版本(firefox 4支持非厂商前缀版本)
相关讨论

用CSS技巧解释https://css-tricks.com/perfect-full-page-background-image/

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

代码：

1
2
3
4
5
6
7
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;
}
相关讨论

为了根据容器大小适当缩放图像，请执行以下操作：

1
2
3
4
{
background-size:contain;
background-repeat: no-repeat;
}

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<html>
    <head>
        Stretched Background Image
        <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>
        <img src="http://www.quackit.com/pix/milford_sound/milford_sound.jpg" width="100%" height="100%" alt="Smile">
       
            Stretch that Background Image!
            <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>
       
    </body>
</html>

我同意100%宽度和高度的绝对分割图像。确保在CSS中为正文设置100%的宽度和高度，并将页边距和填充设置为零。使用此方法可以发现的另一个问题是，选择文本时，选择区域有时会包含背景图像，这会使整页处于选中状态，从而产生不幸的效果。您可以使用user-select:nonecss规则来绕过这个问题，如下所示：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<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>
       
            content here
       
        <img src="bg.jpg">
    </body>
</html>

同样，Internet Explorer是这里的坏人，因为它不识别用户选择选项-甚至Internet Explorer 10预览都不支持它，因此您可以选择使用javascript来阻止背景图像选择(例如，http://www.felgall.com/jstip35.htm)或使用css 3 background stretch方法。

另外，对于seo，我会将背景图像放在页面的底部，但是如果背景图像加载时间太长(即，最初使用白色背景)，则可以移动到页面的顶部。

相关讨论

谢谢！

但之后，谷歌的Chrome和Safari浏览器就不再适用了(拉伸也起作用，但图片的高度只有2毫米！)直到有人告诉我缺少什么：

Try to set height:auto;min-height:100%;

因此，对于您的height:100%;行，将其更改为：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
#### #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, body{height:100%;}

#page{background:#ffffff; height:auto !important;height:100%;min-height:100%;position:relative;}

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

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

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

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

1
    <img src="img.jpg" class="stretch" alt="" />

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
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%;
}

使用backstretch插件。一个甚至可以有几个图像幻灯片。它也在容器中工作。例如，通过这种方式，一个人可能只有一部分背景被背景图像覆盖。

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

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

1
2
3
background-repeat: no-repeat;
background-size: cover;
background-position: center;

这个看起来很漂亮

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

如果样式表是在不支持CSS3的地方实现的，那么border-image属性非常有用。如果您使用的是Firefox的Chrome，那么我建议您使用background-size:cover属性本身。

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

1
2
3
4
background-size: cover;
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;

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

您想只使用一个图像来实现这一点吗？因为你可以用两张图片来做一个有点像拉伸背景的图片。例如，PNG图像。

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

相关讨论

使用这个CSS：

background-size: 100% 100%

相关讨论