Как показать текст поверх изображения Blogger

Текст поверх изображения Blogger

Когда вы прокрутите веб-страницу и поместите курсор на изображение, вы увидите всплывающую подсказку с текстом, который был вставлен в тег заголовка, относящийся к рассматриваемому изображению.
Когда вы публикуете фотографию на веб-странице, рекомендуется также добавить теги title и alt. Тег alt является фундаментальным с точки зрения SEO, потому что он показывает так называемый альтернативный текст или скорее текст отображаемый в браузере, когда по какой-то причине последний не может загрузить изображение.

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

Пользователь Blogger может добавлять теги title и alt к изображению непосредственно из редактора. Нажмите на фото, чтобы выбрать его. Различные кнопки будут показаны чтобы выбрать его размер и выравнивание . Там также будет кнопка, чтобы добавить заголовок и описание.

При нажатии на Свойство откроется форма, в которой вы можете ввести содержимое текста заголовка и альтернативного текста. Вы можете добавить тот же контент или разнообразить. Переходя к HTML, можно будет убедиться, что два текста были вставлены в код в два тега с этим синтаксисом:

title = " Заголовок изображения " и alt = " Альтернативный текст изображения "

Подсказка к заголовку изображения, которая появляется при наведении курсора, довольно мала и эстетически не слишком хороша. В этом посте мы увидим, как настроить отображение тега заголовка изображения. Я буду ссылаться на Blogger, но код, который я опубликую, будет работать на всех платформах  поддерживающих CSS.

Перейдите в режим HTML в редакторе и вставьте такой код

<style>.text-overlay {    position: relative;    width: 100%;}h4 {    position: absolute;    color: #eee;    font: bold 26px Georgia;    padding:10px;    top: 100px;    left: 10px;    width: 100%;}</style><div align="center"><div class="text-overlay">       <img src="http://lorempixel.com/600/400" alt="testo alternativo" />       <h4>Una immagine casuale<br/>mostrata con Lorem Pixel</h4></div></div>

Результатом будет изображение с наложенным текстом, даже без наведения на него курсора. В результате будет отображаться изображение, подобное следующему.

В качестве URL изображения я использовал случайное изображение, полученное с помощью сервиса Lorem Pixel .

Настройки касаются текста отображаемого над фотографией, который был окрашен в синий цвет. Мы не должны забывать альтернативный текст, который в этом случае отличается от названия. Затем вы можете изменить код цвета текста, размер шрифта и семейство шрифтов.

Два главных тега: 100px; и слева: 10 пикселей; они используются для позиционирования текста в соответствии с расстоянием от верхней и левой сторон фотографии. Но при (необязательно) добавлении тега <div align = " center "> запись будет центрирована.


Пользователи Blogger смогут вставить код в тему, вставив выделенную зеленую часть прямо над тегом </head> . Таким образом, в сообщении им нужно будет только ввести выделенный желтый код. Очевидно, что вместо URL-адреса изображения, взятого из Lorem Pixel, необходимо вставить ссылку на изображение, которое могло быть ранее загружено в Blogger, в черновике.