账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    为什么父元素用了fixed定位后,设置了background-size:cover的子元素的背景图不能铺满整个元素?
    28
    0
    <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,是能够铺满整个子元素的,但是定位后就出现孔隙了。这是为什么?

    0
    打赏
    收藏
    点击回答
        全部回答
    • 0
    更多回答
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部