Question

我尝试将图片用作链接，并使用CSS来显示该图片，但它无法正常工作且根本无法显示图片。

HTML

<a id="nav_a_img" href="#"></a>

CSS

#nav_a_img{
 background: url("image/nav/home.png") no-repeat;
 width: 32px;
 height: 32px;

}

#nav_a_img:hover{
 background: url("image/nav/home_w.png") no-repeat;
 width: 32px;
 height: 32px;
}

Answer 1

根据定义，

width和height不适用于display:inline的元素，这是a元素的默认元素。

使用display:inline-block或display:block，或浮动链接（取决于您希望在此处实现的目标）。

Answer 2

为什么不......

<a href="#"><div id="nav_a_img"></div></a>


#nav_a_img{
    background: url("image/nav/home.png") no-repeat;
    width: 32px;
    height: 32px;
}
#nav_a_img:hover{
    background: url("image/nav/home_w.png") no-repeat;
    width: 32px;
    height: 32px;
}

Answer 3

#nav_a_img{
 background: url("image/nav/home.png") no-repeat;
 display:block; /*<=== add this*/
 width: 32px;
 height: 32px;
 }

FA008

使用CSS显示背景图像并且它不起作用

3 个答案: