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

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

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

width:100%; height:100%;

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

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


当前回答

我同意图片在绝对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>

同样,ie浏览器在这里是坏人,因为它不识别用户选择选项-甚至Internet Explorer 10预览也不支持它,所以你可以选择使用JavaScript来阻止背景图像选择(例如,http://www.felgall.com/jstip35.htm)或使用css3 background-stretch方法。

另外,对于搜索引擎优化,我会把背景图片放在页面的底部,但如果背景图片加载时间太长(也就是说,最初的背景是白色的),你可以移动到页面的顶部。

其他回答

下面的方法对我很有效。

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

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

这是由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;
}

您希望仅使用一个图像就实现这一点吗?因为你可以用两张图片来做一个类似的背景拉伸。比如PNG图片。

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

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

使用我提到的代码…

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

这就产生了预期的效果:只有内容会滚动,背景不会滚动。

背景图像根据浏览器视口的大小调整为任何屏幕大小。当内容不适合浏览器视口时,用户需要滚动页面,当内容滚动时,背景图像在视口中保持固定。

使用css3,这似乎会容易得多。