CSS背景图像不显示

Question

我对使用CSS使用空<a>元素显示图像感到困惑。

<a class="header" href="#"></a>

确实创建了以下css中指定的可点击区域：

.header { width: 50px; height 50px; background-image:url('images/picture.png') }

但是，不会显示图片。如果我还包括：

.header:hover { background-image:url('images/picture.png'); }

然后它会显示图片。我的目标是使用CSS来使用this method的图像到图像替换，但我似乎还没有理解它的基础知识。

Answer 1

与你的css一起走在正确的轨道上。您必须添加display：block以允许锚标记获取高度。

.header { width: 50px;
          height 50px; 
          background:url('images/picture.png'); 
          display:block;
}