Техника замены изображения -9999px была популярна в течение большей части десятилетия. Чтобы заменить текстовый элемент изображением, используйте следующий код:
<h1>This Text is Replaced</h1>
<style>
h1
{
background: url("myimage") 0 0 no-repeat;
text-indent: -9999px;
}
</style>
Фон элемента отображается, а его текст перемещается за пределы экрана, поэтому он не мешает. Просто и эффективно. Он часто использовался для отображения графических заголовков — это редко требуется сейчас, когда у нас есть веб-шрифты, но вы все равно найдете его используемым во всем Интернете.
До нынешнего момента.
Скотт Келлум открыл новую технику и продвинул ее на сайте Zeldman.com :
#replace
{
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
}
Код отступает от текста за пределы ширины контейнера, но не переносится, а переполнение скрыто.
Хотя это немного дольше и труднее запомнить, производительность можно улучшить, поскольку браузер больше не рисует рамку размером 9 999 пикселей за кулисами. Это также предотвратит странные, расширенные влево контуры, которые вы увидите вокруг ссылок, использующих скрытый текст.
Я не смог обнаружить никаких минусов — только бы мне хотелось, чтобы я открыл это первым. Вы приняли технику? Были ли у вас какие-либо проблемы?
И если вам понравилось читать этот пост, вы полюбите Learnable ; место, чтобы узнать новые навыки и приемы у мастеров. Участники получают мгновенный доступ ко всем электронным книгам и интерактивным онлайн-курсам SitePoint, таким как HTML5 и CSS3 для реального мира .
Комментарии к этой статье закрыты. У вас есть вопрос о CSS? Почему бы не спросить об этом на наших форумах ?