Можно ли на чистом CSS (без JS) сделать текстовый fallback для прозрачных изображений (png)?

Question

[Андрей Морозов]

Например, если изображения не загрузились, или они отключены пользователем, то должен отображаться текст. И чтобы текст можно было стилизовать (шрифт, цвет).

Интересует случай, когда картинка задается фоном, а не тегом img.

Answer 1

[Юрий Лобанов]

Для отображения текста есть alt, стилизовать его можно через тег img
codepen.io/iiil/pen/sezvF

Comments

[Андрей Морозов]

Да отличный вариант для img, но больше интересует случай, когда картинка задается фоном.

[Юрий Лобанов]

@LuckyTrue почему без js, не просветите? Уж очень много ограничений. Вы не хотите использовать атрибут, который специально для этого предназначен (точнее, хотите использовать бэкграунд), при этом не хотите использовать js. Простенький скрипт решит проблему Вашу в два счета, без js Вы получите (если еще получите) тяжеловесный велосипед с различными ограничениями.

[Андрей Морозов]

@iiil Чистый интерес, я просто без JS ничего не смог придумать.

[Юрий Лобанов]

@LuckyTrue не подумайте, что меня это сильно беспокоит. Но мой ответ, который был дан раньше отмеченных решением есть то же самое. Во-первых, как такового уточнения про бэкграунд сначала не было, во-вторых, и про альт, и про стилизацию альта я написал.
Тот факт, что авторы предлагают растянуть картинку на весь div отношения к вопросу не имеет. Размер бэкграунда может быть и не на весь блок.

Answer 2

[Olexandr Dmukhovskiy]

Вижу только 1 варинат.
Делаем картинку фоном блока но используя тег img

min-height:100%;
min-width:100%;

Также добавляем стилизацию текста, например размер и цвет шрифта
Когда картинка не подгрузится будет отображаться alt

Answer 3

[Eediter]

Если именно средствами только CSS, то на текущий момент — вряд ли, а вот в паре с простенькой конструкцией на HTML — вполне.

Просто сделайте из IMG подложку для контейнера, который описываете, и разместите там свой альтернативный текст для изображения.

cssdesk.com/pSWeR

Правда, SEO вас за такие финты по головке в любом случае не погладят…

Comments

[Eediter]

Выше olexandrbig уже предложил этот же вариант, не заметил.

Answer 4

[Виталий Желтяков]

Делаете div-обёртку изображения с вашим текстом и фиксированными размерами. Если изображения отключены или не загрузились, то пользователь увидит содержимое блока обёртки.
Решение без JS на чистом HTML+CSS.

Comments

[Андрей Морозов]

А если картинка прозрачная в центре? Тогда текст будет виден вместе с изображением.

[Виталий Желтяков]

@LuckyTrue Аргумент хороший. Можно, конечно, задать фон картинке, но это тоже зависит от ситуации.

[Андрей Морозов]

@VitaZheltyakov Можно, но вопрос лишь в том как задетектить, что картинка не загрузилась, и убрать этот фон.