CSS：使用div和背景图像，图像不会调整大小以适应div大小

Question

我有一些社交媒体图标，大小为71px一块。我想使用CSS将图像缩小到50px。我正在使用div进行hover效果并将其更改为不同的图像，该图像基本上是相同的图像，但是呈蓝色。

我无法通过在其上设置background-size: cover来弄清楚为什么我的图片没有调整大小。他们正如下图所示被切断。

顺便说一句，我正在使用Bootstrap。

HTML          

<div class="row">
    <div class="col-md-12 col-sm-12">

        <div id="social_fb" class="social_icon"></div>
        <div id="social_twitter" class="social_icon"></div>
        <div id="social_gplus" class="social_icon"></div>

    </div>
</div>

CSS

body { 
margin: 0; 
padding: 90px 0 0 0; 
font-family: 'Raleway', sans-serif;
}

#site_wrapper { 
    overflow-x: hidden; 
}

a { 
    text-decoration: none !important; 
}
a:hover { 
    color: #ed1c24; 
}

h1, h2, h3 { 
    margin: 0; 
    color: #888; 
}
h1 { 
    font-size: 30px; 
}
h2 { 
    font-size: 24px; 
}
h3 { 
    font-size: 20px; 
}

section > .container { 
    border-bottom: 1px solid #ececec; 
    padding-top: 80px; 
    padding-bottom: 80px; 
}

.valign_center { 
    display: inline-block; 
    vertical-align: middle; 
}

.nopadding { 
    padding: 0 !important; 
    margin: 0 !important;
}

#social_media .container { 
    padding-top: 50px; 
    padding-bottom: 50px; 
}

#social_media h2 { 
    font-size: 28px; 
    color: #0095da; 
    margin-bottom: 30px; 
}

.social_icon { 
    display: block; 
    background-size:cover;
    width: 50px; 
    height: 50px; 
}

#social_fb { 
    width: 50px; 
    height: 50px; 
    background: url("../images/social_fb.png"); 

}
#social_fb:hover { 
    width: 50px; 
    height: 50px; 
    background-image: url("../images/social_fb_hover.png"); 
}

#social_twitter { 
    width: 50px; 
    height: 50px; 
    background: url("../images/social_twitter.png"); 
}
#social_twitter:hover { 
    width: 50px; 
    height: 50px; 
    background-image: url("../images/social_twitter_hover.png"); 
}

#social_gplus { 
    width: 50px; 
    height: 50px; 
    background: url("../images/social_gplus.png"); 
}
#social_gplus:hover { 
    width: 50px; 
    height: 50px; 
    background-image: url("../images/social_gplus_hover.png"); 
}

Answer 1

原因是您在background，#social_twitter等样式中设置#social_fb。这优先于background-size: cover。

如果将background属性设置为background-image，它应该开始工作。

CSS

#social_fb { 
    width: 50px; 
    height: 50px; 
    background-image: url("../images/social_fb.png"); 

}
#social_fb:hover { 
    width: 50px; 
    height: 50px; 
    background-image: url("../images/social_fb_hover.png"); 
}

#social_twitter { 
    width: 50px; 
    height: 50px; 
    background-image: url("../images/social_twitter.png"); 
}
#social_twitter:hover { 
    width: 50px; 
    height: 50px; 
    background-image: url("../images/social_twitter_hover.png"); 
}

#social_gplus { 
    width: 50px; 
    height: 50px; 
    background-image: url("../images/social_gplus.png"); 
}
#social_gplus:hover { 
    width: 50px; 
    height: 50px; 
    background-image: url("../images/social_gplus_hover.png"); 
}