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

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

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

<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。