为什么父元素用了fixed定位后，设置了background-size:cover的子元素的背景图不能铺满整个元素？

Question

<style>
.bottommenu {
    position:fixed;
    bottom:0px;
    border-top:1px solid #b0b0b0;
    padding-top:3.5%;
    background:white;
    width:100%;
    height:65px;
}
.menubutton {
    position:relative;
    width:20%;
    height:90%;
    float:left;
}
.buttonimg {
    position:relative;
    background-color:rgb(176,176,176);
    width:50%;
    height:100%;
    margin: 0 auto;
    background-size:cover;
}
.bottommenu .menubutton .buttonimg:hover {
    background-color:pink;
}
.subbuttons {
    visibility:hidden;
    transition:all.3s;
    left:-150%;
    width:300%;
    opacity:0;
    height:300%;
    position:relative;top:-330%;
}
</style>

<div style="width:414px;">
    <div class="bottommenu">
        <div class="menubutton">
            <div class="buttonimg" style="backgroundimage:url(/wpcontent/uploads/2018/04/bnk.png);">
            </div>
        </div>
        <div class="menubutton">
            <div class="buttonimg" style="background-image:url(/wp-content/uploads/2018/04/classify.png);">
            </div>
        </div>
        <div class="menubutton">
            <div class="buttonimg" style="background-image:url(/wp-    content/uploads/2018/04/wish.png);">
            </div>
        </div>
        <div class="menubutton">
            <div class="buttonimg" style="background-image:url(/wp-content/uploads/2018/04/cart.png);">
            </div>
        </div>
   </div>
</div>

父元素没进行fixed定位的时候background-size:cover，是能够铺满整个子元素的，但是定位后就出现孔隙了。这是为什么？

Answer 1

帮你做了排版，以后代码不要直接粘贴！ backgroundimage => background-image cover是用于图片小于容器，把图片等比例铺满，这个会裁剪图片。 contain 是用于图片大于容器，把图片等比例缩小，这个会显示完整图片但不会铺满。