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

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

如果您将背景属性设置为 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"); 
}

CSS：使用 div 和背景图片，图片未调整大小以适应 div 大小

CSS: using div and background image, image not resizing to fit div size

html

css

image

twitter-bootstrap-3