Img与CSS交换将无法正常工作

Question

这是我的代码。 HTML：

<div id="socmed">

<div id="icons"> 
    <div id="fb"></div>
</div>
</div>

CSS：

#socmed {
height: 100px;
padding-top: 70px;
padding-bottom: 50px;
background-color:rgba(247, 34, 34, 0.7);
width: 100%;
}

#icons {
width: 300px;
height: 75px;
margin: 0px auto;
}

#fb {
height: .89in;
width: .89in;
background-image:url("../images/facebook_dark.png");
}
#fb:hover {
height: .89in;
width: .89in;
background-image:url("../images/facebook_active.png");

目前，我的“socmed”div中都没有出现任何徽标。谁知道我做错了什么？难住了。

Answer 1

检查以下步骤：

1.Image包含文件夹路径（inspect the path） 2.如果图像尺寸很大，则不会显示完整图像。因此，根据上述尺寸，它将显示部分图像。对于该问题，使用background-size属性

看看：DEMO