Question

我的背景图片是1920x1080。我想调整大小并将此图像居中以填充屏幕并始终居中。我使用了两种不同的方法：

1：

.background{
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

2：

.background{
    max-width: 100%;
    max-height: 100%;
}

两者都在我的台式计算机上运行，其分辨率为1280x1024（是的，它们仍然存在）。但是，当我在手机上查看此页面时，其分辨率为1920x10180，纵向显示，图像不会填满整个屏幕。

Desktop
Mobile phone

正如您所看到的那样，图像没有像我手机上那样填满屏幕。当cover大于图像本身时，它是否会填满屏幕？如果是这样，我该如何解决这个问题？

编辑： .background的完整风格：

.background{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-position:center center;
    filter: blur(3px);
    -webkit-filter: blur(3px);
    -moz-filter: blur(3px);
    -o-filter: blur(3px);
    -ms-filter: blur(3px);
    z-index: 0;
}

EDIT2： 我生成的随机图片是background的{{1}}：

<div class="background></div>

Answer 1

使用背景大小：封面，背景图像填满整个区域。您的移动屏幕截图看起来确实已经应用了背景大小：包含。

Answer 2

在JS中，您使用background简写属性，该属性不仅设置URL /重复/位置，还会使用默认属性覆盖您最初在CSS中定义的background-size属性。

尝试在JS中添加一行，然后重置＆＃34;动态更新背景后的background-size：

document.getElementById('background').style.background = 'url(img/1.jpg) no-repeat center center fixed';
document.getElementById('background').style.backgroundSize = 'cover';

同样在您的代码中，您使用getElementById但在CSS中有一个类选择器

小提琴：http://jsfiddle.net/2vnasec5/

当屏幕大于图像时，覆盖背景不填充屏幕

2 个答案: