Это - один путь:
h1 {
text-indent: -9999px; /* sends the text off-screen */
background-image: url(/the_img.png); /* shows image */
height: 100px; /* be sure to set height & width */
width: 600px;
white-space: nowrap; /* because only the first line is indented */
}
h1 a {
outline: none; /* prevents dotted line when link is active */
}
Вот иначе для сокрытия текста при предотвращении огромного поля на 9 999 пикселей, которое создаст браузер:
h1 {
background-image: url(/the_img.png); /* shows image */
height: 100px; /* be sure to set height & width */
width: 600px;
/* Hide the text. */
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
}
Это - на самом деле область, готовая к обсуждению со многими тонкими доступными методами. Важно, чтобы Вы выбрали/разработали технику, которая удовлетворяет Ваши потребности включая: программы экранного доступа, images/css/scripting комбинации включения - выключения, SEO, и т.д.
Вот являются некоторыми хорошими ресурсами для начала работы в будущем standardista методов замены изображения:
http://faq.css-standards.org/Image_Replacement
можно использовать свойство css background-image
и z-index
, чтобы гарантировать, что изображение остается перед текстом.
Большая часть перекрестного браузера, который дружественный путь состоит в том, чтобы записать HTML как
<h1><span>Website Title</span></h1>
тогда CSS использования, чтобы скрыть промежуток и заменить изображение
h1 {background:url(/nicetitle.png);}
h1 span {display:none;}
, Если можно использовать CSS2, тогда существует некоторые лучшие способы использовать content
свойство, но к сожалению сеть еще не составляет 100% там.
См. mezzoblue для подробного описания каждой техники, с сильными и слабыми сторонами, а также с примерами html и css.