0

我正在尝试使用 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');
 }

编辑：是的，现在可以正常工作了，忘记了 ; 在高度之后，但没有我在它周围有一个白色边框并尝试设置边框：无；没运气

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

4 回答 4

7

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

于 2013-06-28T17:24:33.217 回答
1

您还可以完全更改方法并使用 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

于 2013-06-28T18:30:02.520 回答
1

background-image仅绘制元素占用的空间。您的a标签没有内容，因此它的宽度为 0。您将看不到任何内容（和背景），直到您至少给它一些宽度（如果需要，还有高度）。

于 2013-06-28T17:25:30.093 回答
-3

您需要为<a>标签添加填充，否则它的宽度和高度为 0，例如：

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

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

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

于 2013-06-28T17:27:51.127 回答