html - Img Swap with 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.图像包含文件夹路径(检查路径)2.如果图像尺寸很大，它不会显示完整图像。所以它会根据提到的尺寸显示部分图像。对于这个问题，使用 background-size 属性

看看:DEMO