Лучший современный подход к замене CSS-изображений

Я пробовал практически все методы, чтобы скрыть текстовое содержимое моего заголовка страницы (h1-тег) и отобразить изображение вместо этого. Ниже ближайший я пришел, но у него есть раздражающий недостаток ... высота h1 остается фиксированной и не уменьшается до уменьшенной высоты фонового изображения. Есть ли другие способы решить эту проблему?Лучший современный подход к замене CSS-изображений

<style> 
    max-width:660px; 
    min-height:150px; 
    background: url('/images/theTitleBkgrdImage.jpg'); 
    background-position: center center; 
    background-repeat: no-repeat; 
    background-size: contain; 
    text-indent: 100%; 
    white-space: nowrap; 
    overflow: hidden; 
</style> 

<h1 class="pgTitle">This is the page title</h1>

источник

2016-05-09 Connie DeCinko

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

Если вы хотите переключаться между двумя тегами, вы можете использовать javascript для установки отображения на блокировку и скрытие и наоборот, в зависимости от ситуации. –

Поскольку Google и устройства чтения с экрана не могут прочитать содержимое моего изображения, чтобы узнать, что такое заголовок страницы. Все страницы должны начинаться с тега H1. –

Если вы используете атрибут alt в изображении, ботов и чтения с экрана будет понятно, что текст принадлежит в h1.

<h1><img alt="This is the page title" src="/images/theTitleBkgrdImage.jpg" /></h1>

источник

2016-05-09 19:04:44 Quantastical

Статьи, которые я недавно прочитал, говорят, что это неправильный способ сделать это. Это изменилось? Вот почему мой вопрос задает вопрос о современном методе. –

@ConnieDeCinko Я бы не согласился, что это «неправильный» способ. Различные стратегии соответствуют различным сценариям. Стратегия, которую вы предоставили в своем вопросе, не удастся, если в браузере включен CSS, но отключены изображения (текст будет вытеснен из вида, но замена изображения не будет отображаться). Подход, который я предоставил, по крайней мере, работает независимо от состояния CSS и изображений в браузере. [Вот хорошая статья] (https://css-tricks.com/css-image-replacement/), показывающая альтернативные решения, но каждый из них имеет потенциальные точки отказа. – Quantastical

@ConnieDeCinko Кроме того, я хотел бы отметить, что примеры, представленные W3, относящиеся к изображениям текста, предлагают формат, который я предоставил, см .: http://www.w3.org/TR/html5/embedded-content -0.html # images-of-text – Quantastical

Лучший современный подход к замене CSS-изображений

ответ

Смежные вопросы