CSS:全尺寸背景图片

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

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

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