Question

尝试使用以下方法获取完整尺寸的背景图片：

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%

但他们都没有工作。

Answer 1

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

您可以选择使用图像完全覆盖屏幕，但不要扭曲图像。在这种情况下，您需要应对图像边缘将被切断的事实。对于这种情况，请使用：background-size: cover
您可以选择确保整个图像可见，而不是扭曲。在这种情况下，您需要注意图像不会覆盖某些背景的事实。处理此问题的最佳方法是为页面提供稳固的背景，并将图像设计为淡入实体（尽管这并非总是可行）。对于这种情况，请使用：background-size: contain
您可以选择用您的背景覆盖整个屏幕，并将其扭曲以适应。对于这种情况，请使用：background-size: 100% 100%

Answer 2

尝试使用contains而不是cover，然后将其居中：

background-size: contain;
background-position: center;

Answer 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;

Answer 4

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

Answer 5

你应该使用body作为选择器而不是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;
}

您不必指定图像的尺寸。

Answer 6

我在body

上使用此CSS时遇到同样的问题

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;

CSS：全尺寸背景图片

6 个答案: