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

我希望我的背景图像拉伸和缩放取决于浏览器视口的大小。

我在Stack Overflow上看到过一些问题，比如拉伸和缩放CSS背景。它工作得很好，但我想使用背景放置图像，而不是使用img标签。

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

width:100%; height:100%;

它的工作，但这个问题有点老了，并指出在css3调整背景图像的大小将工作得很好。我已经尝试了第一个例子，但它不适合我。

是否有一个好的方法来做背景图像声明?

当前回答

实际上，您可以使用img标记实现与背景图像相同的效果。你只需要将它的z-index设置得比其他所有东西都低，设置position:absolute，并为前景中的每个盒子使用透明背景。

2009-07-19 17:14:39

其他回答

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-23 19:58:51

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

<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-02 14:39:23

这是由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-28 06:29:17

使用下面的CSS:

背景尺寸:100% 100%

2018-11-19 12:29:40

下面的方法对我很有效。

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

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

2020-03-25 21:07:47

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

推荐文章

最新文章

标签