Замена изображения CSS

Замена изображения CSS - это метод веб-дизайна, использующий каскадный стиль. e Таблицы для замены текста на веб-странице изображением, содержащим этот текст. Он предназначен для того, чтобы страница оставалась доступной для пользователей программ чтения с экрана, текстовых веб-браузеров или других браузеров, в которых поддержка изображений или таблиц стилей отключена или отсутствует, при этом разрешая изображение должно отличаться между стилями. Также называется замена изображения Фарнера для Тодда Фарнера, одного из людей, изначально приписывающих идею замены изображения в 2003 году.

• 1 Мотивация
• 2 Реализации
• 3 Ссылки
• 4 Внешние ссылки

Типичный метод вставки изображения в документ HTML - с помощью тега . Однако этот метод имеет свои недостатки в отношении доступности и гибкости:

• Хотя атрибут alt предназначен для предоставления текстового представления содержимого изображения, это исключает использование Разметка HTML в текстовом представлении вызывает проблемы у некоторых поисковых роботов.
• Использование тега для отображения текста носит презентационный характер; многие веб-дизайнеры утверждают, что презентационные элементы должны быть отделены от содержимого HTML, помещая первые в таблицу стилей CSS.
• Изображения, на которые ссылается тег , не могут быть легко изменены с помощью CSS, что вызывает проблемы с альтернативными таблицами стилей.

Для устранения этих проблем была разработана замена изображения по Фарнеру.

Исходная реализация замены изображения, описанная с помощью, использовала заголовок, внутри которого находился элемент , содержащий текст заголовка:

Образец заголовка

Сквозной стиль листов, заголовок затем получил фон, содержащий желаемое изображение, а скрыл, установив для его свойства CSS displayзначение none:

#firHeader {width: 300px; высота: 50 пикселей; фон: #fff url (firHeader.gif) вверху слева без повтора; } #firHeader span {display: none; }

Однако вскоре было обнаружено, что этот метод заставлял некоторых программ чтения с экрана полностью пропускать заголовок, поскольку они не читали текст, для которого свойство displayравно none. Более поздний метод Phark, разработанный Майком Рандлом в 2003 году, вместо этого использовал свойство text-indentдля выталкивания текста за пределы области изображения, решая эту проблему. :

#firHeader {width: 300px; высота: 50 пикселей; текстовый отступ: -5000px; / * ← Phark * /}

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

Также в 2003 году Дэйв Ши одноименный метод Ши решает обе проблемы, упомянутые ранее, за счет дополнительной :

замены исправленного изображения

При абсолютном размещении пустого над текстовым элементом текст фактически скрывается. Если изображение не загружается, текст за ним все равно отображается. По этой причине изображения с прозрачностью нельзя использовать с методом Ши.

#header {ширина: 329 пикселей; высота: 25 пикселей; положение: относительное; } #header span {background: url (firHeader.gif) no-repeat; позиция: абсолютная; ширина: 100%; высота: 100%; }

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

1. ^ Bowman, Douglas (2003-03-07). «Использование фонового изображения для замены текста». Стопдизайн. Проверено 5 апреля 2011 г.
2. ^Мосли, Мари (3 ноября 2015 г.). «Музей замены изображений». CSS-хитрости. Проверено 30 марта 2019 г.

• Замена исправленного изображения - обзор различных методов FIR от Дэйва Ши
• Полная замена изображения - комплексный метод замены изображений от Джесси Шоберг