Question

我最近整理了一个有效的导航栏。

我很高兴，但不幸的是它无法访问。

当图像关闭时，我想在其位置显示替换文字。

使用我的示例：http://pastebin.com/hXth7FSK？

是否很容易实现

非常感谢任何指示。

迈克尔

Answer 1

您绝对可以在元素内部放置一个范围，以便它将文本覆盖为this post from Dave Shea explains：

<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%;
    }

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

Answer 2

如果你想使用背景图片（我更喜欢背景图片以及导航），你可以通过将CSS：position: relative; z-index: 100;添加到带有背景图像的所有导航元素，绝对可以在其上放置空白图像。然后将其放入其中：

<img src="pixel.gif" alt="Text to display when images are off" style="width: 100%; height: 100%; position:absolute; top: 0; left: 0; z-index: 50;" />

然后，当图像关闭时，将显示空白图像的替代文字。此图像将位于元素下方，但当图像关闭时，您将能够看到图像的替换文本。此外，这将适用于部分透明的背景图像。

您可以使用this pixel.gif image。

希望这会有所帮助。

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

2 个答案: