Замена изображений CSS, но ПОКАЗАТЬ текст, когда изображения отключены

Question

Я недавно собрал рабочую панель навигации.

Я доволен ею, но, к сожалению, она недоступна.

Когда изображения выключены, я хотел бы показатьтекст замены на его месте.

Легко ли это сделать на моем примере: http://pastebin.com/hXth7FSK?

Большое спасибо за любые указатели.

Михаил

Answer 1

Абсолютно можно разместить интервал внутри элемента так, чтобы он охватывал текст, как в этом посте Дейва Ши объясняет :

<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;" />

Затем, когда изображения выключены, будет показан альтернативный текст пустого изображения. Это изображение будет под элементом, но когда изображения выключены, вы сможете увидеть альтернативный текст изображения. Кроме того, это будет работать для частично прозрачных фоновых изображений.

Вы можете использовать это изображение pixel.gif .

Надеюсь, это поможет.