Это «действительный» метод замены изображений CSS?

Question

Я только что придумал это, похоже, оно работает во всех современных браузерах, я просто протестировал его затем (IE8 / совместимость, Chrome, Safari, Moz)

HTML

<img id="my_image" alt="my text" src="images/small_transparent.gif" />

CSS

#my_image{
  background-image:url('images/my_image.png');
  width:100px;
  height:100px;}

Pro-х:

• изображение alt text является наилучшей практикой для доступности / seo
• без дополнительной разметки HTML, и CSS тоже довольно минимальный
• обходит проблему css on / images, где методы text-indent скрывают текст от пользователей с низкой пропускной способностью

Самым большим недостатком, который я могу себе представить, является css off / images on ситуаций, потому что вы отправите только прозрачный gif.

Я хотел бы знать, кто использует изображения без таблиц стилей? какой-то мобильный телефон или что-то?

Я создаю несколько сайтов для клиентов в региональной Австралии (в сотнях километров от ближайшего города), где многие пользователи будут страдать от подключений удаленного доступа, а также зачастую от устаревших браузеров, поэтому проблема «отключение изображений» важное соображение.

есть ли другие побочные эффекты с этой техникой, которые я не рассматривал?

edit: Просто хотел добавить дополнительную информацию, которую я бы использовал, поверх обычного тега изображения, потому что

A. Я могу использовать css-спрайты

B. Я могу генерировать CSS с php, который чередует источники фонового изображения между различными поддоменами, используя один массив

C. Мне нравится, что изменение размера изображения теперь не растягивает и не искажает его, поэтому оно ведет себя как все остальное на странице.

Answer 1

Что не так с обычными тегами изображений? img теги предназначены для использования, когда в вашем контенте есть изображения, и CSS не должен принимать никакого участия в том, что представляет собой фактический контент. С другой стороны, презентационные изображения должны быть заданы как фоновые изображения для div и тому подобного, а затем обработаны с помощью CSS, чтобы они не мешали содержимому и структурной разметке.

Нет сценария, в котором вам нужно что-то подобное делать.

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

#element {
    width: 100px;
    height: 100px;
    background: image(pic.jpg);
    text-indent: -9999px;
}

<div id="element">This text will show if CSS is off, otherwise an image is displayed.</div>

Answer 2

Ну, я использую эту технику в тегах h1 / h2, когда клиентам нужны странные шрифты. Вот как я это делаю http://flowdev.tumblr.com/post/1187111884/the-power-of-h1-and-h2-tags

Насколько я знаю, работает во всех браузерах.

Answer 3

Тату прав, хотя вам, кажется, не нужен отступ. Просто поместите изображение, которое вы хотите, в качестве источника изображения. Затем вы получаете текст, когда изображения выключены (и обратите внимание, что альтернативный текст можно стилизовать с помощью CSS на img), и отображать изображение при получении.

Главное в «методах замены изображений» состоит в том, что люди хотят, чтобы текст из атрибута alt при оформлении заголовков, чтобы они были правильно проиндексированы для поиска. Впрочем, img будет работать без CSS или дополнительной разметки.