CSS图像替换,但在禁用图像时显示文本

Question

我最近整理了一个工作导航栏.

我很高兴,但遗憾的是它无法访问.

当图像关闭时,我想在其位置显示替换文本.

用我的例子很容易实现这个:http://pastebin.com/hXth7FSK？

非常感谢任何指针.

迈克尔

Answer 1

您可以绝对在元素内部放置一个跨度,以便它覆盖文本,因为Dave Shea的这篇文章解释说:

<h3 id="header" title="Revised Image Replacement">
    <span></span>Revised Image Replacement
</h3>

/* css */
#header {
    width: 329px;
    height: 25px;
    position: relative;
    }
#header span {
    background: url(sample-opaque.gif) no-repeat;
    position: absolute;
    width: 100%;
    height: 100%;
    }

唯一的限制是这不适用于部分透明的图像.