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

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

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

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

width:100%; height:100%;

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

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

当前回答

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

<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

其他回答

background-size: 100% 100%;

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

2016-01-26 18:34:37

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

您可以使用border-image: yourimage属性将图像缩放到边界。即使你给出了背景图像，边界图像也会被绘制在它上面。

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

2017-07-02 13:51:27

为了根据容器大小适当缩放图像，请使用以下方法:

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

2017-01-07 18:52:38

使用下面的CSS:

background: url('img.png') no-repeat; 
background-size: 100%;

2011-05-09 09:41:32

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

推荐文章

最新文章

标签