css - 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 来使用这种图像到图像替换的方法，但我似乎还没有理解基础知识。

Answer 1

你的 CSS 走在正确的轨道上。您必须添加 display:block 以允许锚标记拾取高度。

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