CSS图片替换，但在禁用图片时显示文字

问题描述：

我最近放置了一个工作导航栏。CSS图片替换，但在禁用图片时显示文字

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

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

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

非常感谢任何指针。

迈克尔

为什么不使用真正的img 而不是背景图片？这样，您可以从Alt属性中获益（如果img关闭，将显示文本）。 –

我总是推测使用作为主导航是不好的做法。我可能是错的。 – michaelmcgurk

你是。为什么会这样？这就是为什么它具有可供视障人士阅读的alt和标题。 – TigOldBitties

答

您可以绝对定位跨度里面的元素，使得它涵盖了文本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%; 
    }

唯一的限制是这不会对部分透明图像的工作。

非常感谢，史蒂夫。我会在一秒钟之内看一看。 – michaelmcgurk

随着一点点jiggery-pokery，那就做了诀窍：http://pastebin.com/0JvcXr0S非常感谢指向我在正确的方向，史蒂夫:) – michaelmcgurk

@mcgarriers你可以接受答案然后;-) – steveax

答

如果你想加入这个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;" />

然后，当图像关闭时，空白图像的alt文本将显示。此图片将在元素下，但当图片关闭时，您将能够看到图片的替代文字。此外，这将适用于部分透明的背景图像。可以使用this pixel.gif image。

希望这会有所帮助。

现在这是一个非常有趣的理论。你能告诉我如何在我的HTML上下文中使用它吗？感谢您的回复。我认为我们已经破解了它:) – michaelmcgurk

@mcgarriers所有你需要做的就是在你的每个菜单元素内添加上面的''代码，并确保将CSS添加到菜单元素，内联CSS或其余的CSS。我试着在jsFiddle中做，但由于某种原因，当我添加菜单CSS时，它使一切都隐藏起来。当我完成后，我会继续尝试并向您发送网址。 Nathan，Coolness， – Nathan

我设法从史蒂夫的上面得到了一个可行的解决方案。但是如果你有时间的话，看看它会发生什么很酷。再次感谢先生。 – michaelmcgurk

CSS图片替换，但在禁用图片时显示文字

相关推荐