Question

我正在尝试使用CSS设置背景图像，但我似乎无法正确填充图像。

这是我想要做的CSS

 a.fb {
   background-image: url('img/Facebook.png');
 }

 a.fb:hover {
  background-image: url('img/FacebookHover.png');
 }

这是我正在使用的html代码，我尝试了几种不同的方法来填充图像而没有运气

<div class="footer">
     <a class="fb" href="http://www.facebook.com" target="_blank"></a>
</div>

非常感谢任何帮助

好的，添加了以下内容，但仍未采取任何其他想法

 a.fb {
    display:block;
    width: 33px;
    height: 33px
    background-image: url('img/Facebook.png');
 }

编辑：是的，现在忘记了;在高度之后，但是没有我在它周围有一个白色边框并尝试设置border：none;没有运气

a.fb {
    border: none;
    display:block;
    width: 33px;
    height: 33px;
    background-image: url('img/Facebook.png');
 }

Answer 1

默认情况下，锚标记显示为内联元素，因此它取决于其内容以获取高度和宽度。要做你想做的事，你应该添加一些样式：display:block; width: 20px; height: 20px。

Answer 2

background-image仅绘制元素占用的空间。您的a代码没有任何内容，因此它的宽度为0.在给出至少一些宽度（以及高度，如果需要）之前，您将看不到任何内容（和背景）。

Answer 3

您还可以完全更改aproach并使用html + mouseover和mouseout事件：

<div class="footer">
    <a class="fb" href="http://www.facebook.com" target="_blank"> 
        <img src="http://www.facebook.com/images/fb_icon_325x325.png" alt="fb" name="fb" width="33px" height="33px" name="image_name" onmouseover="fb.src='http://goo.gl/cxiR7'; fb.width='38'; fb.height='38';" onmouseout="fb.src='http://www.facebook.com/images/fb_icon_325x325.png'; fb.width='33'; fb.height='33';" />
    </a>
</div>

这是一个jsBin：http://jsbin.com/onehuw/1/edit

Answer 4

您需要在<a>标记中添加填充，否则其宽度和高度为0，例如：

a.fb {
  padding: 20px;
  background-image: url('img/Facebook.png');
}

a.fb:hover {
  background-image: url('img/FacebookHover.png');
}

您也可以设置锚点的宽度和高度

CSS背景 - 图像没有显示

4 个答案: