为什么父元素用了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

帮你做了排版，以后代码不要直接粘贴！

1. backgroundimage => background-image
2. cover是用于图片小于容器，把图片等比例铺满，这个会裁剪图片。
   contain 是用于图片大于容器，把图片等比例缩小，这个会显示完整图片但不会铺满。