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

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 的手机 phone 上查看此页面时，纵向显示的图像没有填满整个屏幕。

Desktop
Mobile phone

如您所见，图像在我的手机上没有像预期的那样填满屏幕 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;
}

编辑2： 我生成一个随机图像作为 <div class="background></div>:

的 background

<script type="text/javascript">
    var NUMBER_OF_IMAGES = 5;
    var rand;
    var setImage = false;

    function randomIntFromInterval(min,max){
        return Math.floor(Math.random()*(max-min+1)+min);
    }

    //Generate random image
    if(!setImage){
        rand = randomIntFromInterval(1, NUMBER_OF_IMAGES);
        document.getElementById('background').style.background = 'url(img/' + rand + '.jpg) no-repeat center center fixed';
    }       
</script>

Answer 1

使用 background-size:cover 时，背景图片会填满整个区域。您的手机屏幕截图看起来确实像您应用了 background-size:contain.

Answer 2

在你的 JS 中你使用了 background shorthand 属性，它不仅设置了 URL/repeat/position，而且覆盖了 background-size 属性您最初在 CSS 中定义，默认为属性.

尝试在动态更新后台后向 "reset" 添加一行 background-size 的 JS:

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

同样在你的代码中你使用 getElementById 但在 CSS

中有一个 class 选择器

Fiddle: http://jsfiddle.net/2vnasec5/

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

Cover background not filling screen when screen is bigger than image

html

css

responsive-design