17

尝试使用以下方法获取全尺寸背景图像：

html {
    height: 100%;
    background:url('../img/bg.jpg') no-repeat center center fixed;
    background-size: cover;
}

它显示具有正确宽度但高度被拉伸的背景图像。我尝试了各种选择，例如

html {
background:url('../img/bg.jpg') no-repeat center center fixed;
background-size: 100% auto;
-webkit-background-size: 100% auto;
-moz-background-size: 100% auto;
-o-background-size: 100% auto;

}

去除height: 100%

但他们都没有工作。

4

6 回答 6

35

您的屏幕显然与您的图像形状不同。这并不少见，即使您的屏幕是相同的形状（纵横比），您也应该始终迎合这种情况，因为其他人的屏幕并不总是如此。为了解决这个问题，您只有以下三个选项之一：

  • 您可以选择用图像完全覆盖屏幕，但不能扭曲图像。在这种情况下，您将需要处理图像边缘将被切断的事实。对于这种情况，请使用：background-size: cover
  • 您可以选择确保整个图像可见且不失真。在这种情况下，您需要处理一些背景不会被您的图像覆盖的事实。处理这个问题的最好方法是给页面一个纯色背景，并设计你的图像淡入纯色（尽管这并不总是可能的）。对于这种情况，请使用：background-size: contain
  • 您可以选择用背景覆盖整个屏幕，并对其进行扭曲以适应。对于这种情况，请使用：background-size: 100% 100%
于 2012-12-27T19:06:32.607 回答
7

尝试使用包含而不是封面，然后将其居中：

background-size: contain;
background-position: center;
于 2012-12-27T18:39:26.533 回答
3 
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;
于 2014-03-04T08:51:21.733 回答
2

更好的解决方案可能是使用轻量级 jQuery 插件来动态调整浏览器站点的背景大小。我真正喜欢的一个是 backstretch.js。它们的实现非常简单。

于 2012-12-27T19:14:42.270 回答
1

我有同样的问题，我在上面使用这个 CSSbody

background: url(image.jpg);
    background-color: rgba(0, 0, 0, 0);
    background-position-x: 0%;
    background-position-y: 0%;
    background-size: auto auto;
background-color: #0a769d;
height: 100%;
min-height: 100%;
max-height: 100%;
width: 100%;
background-size: 100% 100%;
background-position: center;
max-width: 100%;
min-width: 100%;
top: 0;
left: 0;
padding: 0;
margin: 0;
于 2017-06-21T01:53:22.027 回答
0

您应该使用正文作为选择器而不是 html，这会导致您的标记出现问题。您的代码如下：

html {
    height: 100%;
    background:url('../img/bg.jpg') no-repeat center center fixed;
    background-size: cover;
}

我会尝试类似的东西：

body {
    background:url('../img/bg.jpg') no-repeat 50% 0 fixed;
    margin: 0 auto;
}

您不必指定图像的尺寸。

于 2012-12-27T19:19:04.703 回答