Как сделать текст поверх изображения? [закрыт]
Закрыт. Этот вопрос не по теме. Ответы на него в данный момент не принимаются.
Сообщение содержит лишь текст задачи, в котором нет описания проблемы, либо вопрос чисто формален («как мне выполнить это задание»). Для повторного открытия вопроса, добавьте описание конкретной проблемы, поясните, что именно не получается, в чём вы видите проблему.
Закрыт 6 лет назад .
Нужно сделать так, чтобы определенный текст разного размера (заголовки статей допустим) можно было разместить поверх картинки. На пример, как на сайте onedio.ru, где на главной странице заголовки статей находятся на картинке поста. Как такое можно сделать? Дайте материал по теме, а лучше фрагмент кода для реализации задуманного.
Как поместить текст на картинку css
Вообще, сам вопрос несложен. Нет ничего хитрого, чтобы расположить один блок, поверх другого. Но всё-таки, есть и в этом вопросе несколько моментов, достойных обсуждения. Я думаю найдутся люди, кому это будет интересно.
Идея состоит в том, чтобы просто накладывать некоторый текст на изображение. Текст представлен в виде блоков переменной длины, предполагается что он будет расположен с левой стороны, с ровной заливкой вокруг текста. Например, как на этом изображении:
Схема документа
HTML-разметка
Конечно, было бы легче использовать div-элемент для вывода изображения в качестве фонового рисунка, но в данном случае я предполагаю, что изображение — это контент документа, и, следовательно, оно принадлежит HTML. Элемент div будем использовать в качестве контейнера для абсолютного позиционирования текста в нём.
Таким образом, мы разместили текст непосредственно поверх изображения. Следующая наша задача сделать фон для текста. Поскольку элемент является блочным элементом, то его мы использовать для этих целей не можем. Воспользуемся inline-элементом . Обернём в него текст внутри заголовка.
Будем использовать этот span для оформления текста и фона:
Проблемы
Как видно из рисунка, в конце строки блок текста заканчивается непосредственно после последнего символа в строке, и начинается сразу же по левому краю на следующей строке. Свойство padding для span-а, в данном случае, нам не поможет.
Чтобы решить проблему, необходимо использовать дополнительные span-ы по обе стороны от тега
, в этом случае мы уже сможем воспользоваться padding-ом.
Этим новым span-ам мы зададим свойство padding:
Что на счёт семантики?
На данном этапе дизайн завершен, но при этом осталась одна проблема. А именно, огромное количество дополнительных элементов HTML добавленных только для дизайна. Я имею в виду span-ы. Чтобы решить эту проблему, воспользуемся jQuery. Для этого удалим все span-ы в разметке, и динамически добавим их:
Как наложить текст на картинку в html?
надо, чтобы и отображались прямо на картинке, а не под ней.
Попробуй задать как фоновое изображение через CSS/SASS.
Вариант 1, с использованием position: absolute
Вариант 2, с использованием background-image (нужно знать размеры блока)
Site design / logo © 2022 Stack Exchange Inc; user contributions licensed under CC BY-SA . rev 2022.12.9.43097
Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.
Как написать текст поверх картинки CSS
В начальной стадии изучения языков HTML, CSS и пр. появляются (как это и должно быть) вопросы: как сделать так, или вот, так и в нашем вопросе, как написать текст поверху изображения. Вполне естественное проявление интереса, и требует закрепление знаний в этой области. Но для выполнения этой задачи вы уже должны знать хоть малую часть CSS чтобы понимать базовые свойства каскадной таблицы.
На самом деле выполнить написания текста поверх картинки не столь трудно. Практически делается за счет свойства position и его атрибутов, а дальше идет оформление самого текста. Можно попробовать сделать по-другому, к примеру, задать блоку div фон при этом использовать ту картинку, на которой должен быть расположен текст.
Но такой способ ограничивает возможности и само применение текста поверх картинки. Поэтому лучшим вариантом будет воспользоваться свойством position . Данный элемент дает большие преимущества и полную свободу движения в указанной области, эта область обозначается свойством position: relative; . А иначе позиционирование будет происходить по отношению к браузеру.
Рассмотрим на первом примере.
HTML
CSS
Пояснение. Основному блоку приписывается значение position: relative; этим мы обозначаем область для свободного позиционирования последующих элементов в этом классе.
Далее, форматируем div в линейно–блочный элемент display: inline-block;
И последнее на что стоит обратить внимание — это position: absolute; , задан элементу .
Остальные стили идут как оформление текста.
Во втором примере используем более длинную надпись на картинке и стилизуем ее должным образом.
HTML
CSS
Ну вот незадача, мы использовали тег
— перенос строки и в итоги получили разрыв между пробелами. Это видно в примере где текст плотно прилегает краям и на вид получается не очень красиво.
Исправить эту ошибку можно по-разному. Применить, к примеру, неразрывный пробел   , что позволит нарастить промежуток.
HTML
CSS
Во втором способе применим тег … он как только жирность поменьше, но мы ее совсем уберем.
HTML
CSS
В стилях добавили новое свойство white-space: nowrap; чтобы текст находился на одной строке. На этом все, сложного думаю ничего нет.
Размещаем текст поверх изображения, используя css
Некоторые находят неправильный выход: рисуют текст на картинке в графических редакторах, после чего размещают изображение с текстом в html документах. Но что делать, если текст надо заменить? Опять перерисовывать картинку? Есть более простые решения.
В результате получаем:
Суть представленного способа в том, что мы делаем div-контейнер, который будет содержать в себе картинку и текст. При этом текст мы будем позиционировать относительно левого нижнего угла контейнера.
Код html:
Код css:
- display: inline-block — нам нужен, чтобы контейнер не растягивался по ширине на всю страницу.
- position: relative — заставляет все вложенные блоки с position: absolute вести отсчёт координат своего положения не от окна браузера, а от блока .container
- display: inline-block — для того, чтобы стили, относящиеся к блочным элементам, могли быть применены к нашему тексту.
- position: absolute — для размещения блок с помощью конкретных координат: bottom, left — отступы снизу и слева (координаты) возможно вместо них использовать top (сверху) и right (справа)
Показываем описание при наведении на картинку
Показанный выше способ можно использовать для отображение текста при наведении картинку мышкой (может пригодиться для описания товаров в интернет-магазине).
Похожие публикации:
- Altera vs xilinx что выбрать
- Tp link tl wn821n как подключить
- Fusioninventory agent что это за программа
- Centos 7 xrdp как поменять язык
Как написать текст поверх картинки CSS
В начальной стадии изучения языков HTML, CSS и пр. появляются (как это и должно быть) вопросы: как сделать так, или вот, так и в нашем вопросе, как написать текст поверху изображения. Вполне естественное проявление интереса, и требует закрепление знаний в этой области. Но для выполнения этой задачи вы уже должны знать хоть малую часть CSS чтобы понимать базовые свойства каскадной таблицы.
На самом деле выполнить написания текста поверх картинки не столь трудно. Практически делается за счет свойства position и его атрибутов, а дальше идет оформление самого текста. Можно попробовать сделать по-другому, к примеру, задать блоку div фон при этом использовать ту картинку, на которой должен быть расположен текст.
Но такой способ ограничивает возможности и само применение текста поверх картинки. Поэтому лучшим вариантом будет воспользоваться свойством position . Данный элемент дает большие преимущества и полную свободу движения в указанной области эта область обозначается свойством position: relative; . А иначе позиционирование будет происходить по отношению к браузеру.
Рассмотрим на первом примере.
HTML
Пирамиды Египта
CSS
.imgblock < position: relative; display: inline-block; >.imgblock img < height: 160px; width: 250px; >.imgblock span < /*background: rgba(0,0,0,0.7); (полупрозрачность)*/ background: #222; color: #fff; border-radius: 2px; position: absolute; right: 0; bottom: 10px; font-size: 18px; padding: 3px 5px; >
Пояснение. Основному блоку приписывается значение position: relative; этим мы обозначаем область для свободного позиционирования последующих элементов в этом классе.
Далее, форматируем div в линейно – блочный элемент display: inline-block;
И последнее на что стоит обратить внимание — это position: absolute; элементу .
Остальные стили идут как оформление текста.
Во втором примере используем более длинную надпись на картинке и стилизуем ее должным образом.
HTML
Семь чудес света
Висячие сады Семирамиды
CSS
.imgblock2 < position: relative; display: inline-block; >.imgblock2 img < height: 160px; width: 250px; >.imgblock2 h2 < left: 0; position: absolute; top: 10px; width: 100%; left: 5px; >.imgblock2 h2 span
Ну вот незадача, мы использовали тег
— перенос строки и в итоги получили разрыв между пробелами. Это видно в примере где текст плотно прилегает краям и на вид получаетесь не очень красиво.
Исправить эту ошибку можно по-разному. Применить, к примеру, неразрывный пробел   что позволит нарастить промежуток.
HTML
Семь чудес света
Висячие сады Семирамиды
CSS
.imgblock2 < position: relative; display: inline-block; margin: 100px; >.imgblock2 img < height: 160px; width: 250px; >.imgblock2 h2 < left: 0; position: absolute; top: 10px; width: 100%; left: 5px; >.imgblock2 h2 span
Во втором способе применим тег … он как только жирность поменьше, но мы ее совсем уберем.
HTML
Семь чудес света Висячие сады Семирамиды
CSS
.imgblock3 < position: relative; display: inline-block; >.imgblock3 img < height: 200px; width: 300px; >.imgblock3 span < left: 10px; position: absolute; top: 10px; width: 100%; >.imgblock3 span b < background: #222; color: #fff; font: 16px/34px arial; padding: 6px 10px; white-space: nowrap; border-radius: 3px; >
В стилях добавили новое свойство white-space: nowrap; чтобы текст находился на одной строке. На этом все, сложного думаю ничего нет.
- ← Установка webuzo на CentOS/RedHat/Ubuntu
- Установка EHCP на Ubuntu →
Добавляем текст поверх картинки в Microsoft Word
Помимо работы с текстом, программа MS Word также позволяет работать и с графическими файлами, которые в ней можно изменять (хоть и по минимуму). Так, нередко добавленную в документ картинку требуется как-нибудь подписать или дополнить, причем, сделать это необходимо так, чтобы сам текст находился поверх изображения. Именно о том, как наложить текст на картинку в Ворде, мы и расскажем ниже.
Существует два метода, с помощью которых можно наложить текст поверх картинки — это использование стилей WordArt и добавление текстового поля. В первом случае надпись будет красивая, но шаблонная, во втором — вы имеете свободу выбора шрифтов, типа написания и форматирования.
Microsoft Word заслужено считается одним из лучших текстовых редакторов, но для работы с графическими элементами, даже элементарной, он подходит с большой натяжкой. Поэтому для наложения надписи на картинку целесообразнее будет воспользоваться не этой программой, а более специализированным средством – онлайн-сервисом Canva, где данная задача решается буквально в несколько кликов, а доступные во встроенном редакторе шаблоны помогут качественно улучшить подобный проект.
Добавление поверх рисунка надписи в стиле WordArt
- Откройте вкладку “Вставка” и в группе “Текст” нажмите на пункт “WordArt”.
- Из развернувшегося меню выберите подходящий стиль для надписи.
- После того, как вы кликните по выбранному стилю, он будет добавлен на страницу документа. Введите необходимую надпись.
Примечание: После добавления надписи WordArt появится вкладка “Формат”, в которой можно выполнить дополнительные настройки. Кроме того, вы можете изменить размер надписи, потянув за границы поля, в котором она находится.
Добавьте в документ изображение, воспользовавшись инструкцией по ссылке ниже. 
Переместите надпись WordArt, расположив ее поверх изображения так, как вам это необходимо. Кроме того, вы можете выровнять положение текста, воспользовавшись нашей инструкцией.
Добавление поверх рисунка обычного текста
- Откройте вкладку “Вставка” и в разделе “Текстовое поле” выберите пункт “Простая надпись”.
- Введите необходимый текст в появившееся текстовое поле. Выровняйте размеры поля, если это необходимо.
- Во вкладке “Формат”, которая появляется после добавления текстового поля, выполните необходимые настройки. Также, вы можете изменить внешний вид текста в поле стандартным способом (вкладка “Главная”, группа “Шрифт”).
Если текстовое поле отображается в виде надписи на белом фоне, перекрывая таким образом изображение, кликните по его краю правой кнопкой мышки и в разделе “Заливка” выберите пункт “Нет заливки”.
Добавление подписи к рисунку
Кроме наложения надписи поверх изображения, вы также можете добавить к нему подпись (название).
- Добавьте изображение в документ Word и кликните по нему правой кнопкой мышки.
- Выберите пункт “Вставить название”.
- В открывшемся окне введите необходимый текст после слова “Рисунок 1” (остается неизменным в этом окне). Если это необходимо, выберите положение подписи (над или под изображением), развернув меню соответствующего раздела. Нажмите кнопку “ОК”.
- Подпись будет добавлена к графическому файлу, надпись “Рисунок 1” можно будет удалить, оставив только введенный вами текст.
На этом все, теперь вы знаете, как сделать надпись на картинке в Ворде, а также о том, как подписывать рисунки в этой программе. Желаем вам успехов в дальнейшем освоении этого офисного продукта.