Как сделать текст под изображением
Как в Ворде (Word) вставить текст в картинку
Как разместить текст поверх рисунка в Word
Обычно для того чтобы вставить текст в картинку пользователи используют растровые графические редакторы. Например, Adobe Photoshop или другие подобные программы. Но, во многих ситуациях можно обойтись и без применения таких мощных программ. В этом материале вы узнаете сразу два способа, как вставить текст в картинку в Word 2007, 2010, 2013 или 2016.
Видео на тему: Как вставить текст в картинку в Ворде: наложение текста поверх картинки в Word
Способ № 1. Простая надпись.
Самый простой способ вставить текст в картинку в текстовом редакторе Word, это воспользоваться функцией «Надпись». Для этого нужно перейти на вкладку «Вставка», нажать на кнопку «Надпись» и в появившемся меню выбрать вариант «Простая надпись».
После этого, на странице появится рамка с текстом. Особенностью данной рамки является то, что она позволяет разместить текст в любой точке документа Word. При этом над текстом в этой рамке можно выполнять различные манипуляции. Например, вы можете поворачивать текст под углом.
Для того чтобы вставить текст в картинку в Ворде, нужно переместить рамку с текстом на вашу картинку. Для этого просто кликните левой кнопкой мышки на краю рамки и не отпуская кнопку мышки переместите рамку на нужное место.
В результате должен получится примерно такой результат, как на картинке внизу.
Дальше нужно выделить мышкой текст внутри рамки и изменить его. Таким образом вы вставите нужный вам текст в картинку.
Если хотите убрать белый фон под текстом, то нужно установить курсор в рамку с текстом и перейти на вкладку «Формат». Здесь нужно нажать на кнопку «Заливка фигуры» и выбрать вариант «Нет заливки».
Похожим способом можно убрать и контур вокруг текста. Для этого нужно нажать на кнопку «Контур фигуры» на вкладке «Формат» и выбрать вариант «Нет контура».
После этого вы получите просто текст поверх картинки.
Данный способ удобен не только тем, что позволяет вставить текст в любом месте картинки. Он еще позволяет использовать дополнительное оформление текста.
Чтобы воспользоваться этими возможностями нужно выделить текст, перейти на вкладку «Формат» и выбрать один из предложенных стилей текста.
В результате можно получить, например, вот такой текст, вставленный поверх картинки.
И все это исключительно с помощью возможностей текстового редактора Word.
Способ № 2. Обтекание текстом.
Второй способ ставить текст в картинку в Ворде заключается в использовании функции под названием «Обтекание текстом».
Для этого нужно кликнуть правой кнопкой мышки по вставленной в Ворд картинке и в появившемся контекстном меню выбрать вариант «Обтекание текстом – За текстом».
После этого картинку можно свободно перемещать по документу Word и при этом она всегда будет под текстом.
Благодаря этому вы можете пододвинуть картинку под нужный вам текст. Таким образом можно вставить текст в картинку в нужном месте документа Word.
Данный способ особенно удобен при использовании больших картинок, который занимают все пространство листа Word.
Дорогой читатель! Добавьте этот сайт в закладки своего браузера и поделитесь с друзьями ссылкой на этот сайт! Мы стараемся показывать здесь всякие хитрости и секреты. Пригодится точно.
Позиционирование текста на картинке в CSS
Я часто вижу в комментариях к урокам или на форумах, когда новички спрашивают: «Я хочу разместить текст поверх картинки, а он оказывается под или над картинкой. Помогите.» Давайте рассмотрим на конкретном примере, как написать текст на картинке в любом месте.
Нам надо рядом с каждым овощем, на иллюстрации ниже, подписать его название. Задача вроде бы простая, но поверьте, может свести с ума любого начинающего веб-мастера.
Я умышленно для примера взял большую картинку 1280×733, чтобы заодно показать, как её адаптировать под разные разрешения экранов. Уже прошли те времена, когда достаточно было научиться верстать только под десктопные разрешения. Делая верстку, следует сразу позаботиться об адаптивности.
HTML-разметка
Первым делом создаем контейнер для овощной картинки и для надписей. Обратите внимание, что каждую надпись мы помещаем в отдельный блок с разными классами. И это логично, поскольку все надписи будут иметь свои координаты на странице, а мы будем управлять ими, прописывая свойства в дивах.
После сделанной HTML-разметке, мы видим только фрагмент картинки и текст, оказавшийся под картинкой. Знакомая картина, не правда ли?
Картинка разъехалась на все свои немаленькие пиксели и появилась горизонтальная полоса прокрутки, но к счастью это легко исправить, задав ширину картинке 100%, тем самым сделав её адаптивной. Хотя бы одну проблему решили.
Теперь займемся текстом.
CSS-стили
В стилях контейнера, ключевым будет свойство position: relative. Этим мы меняем правила и просим вести отсчет координат не от верхнего левого угла окна браузера, а от угла контейнера, который является родителем для всех вложенных в него элементов и занимает 90% окна.
.container <
width: 90%;
position: relative;
text-align: center;
color: #000;
font-family: arial black;
font-size: 250%;
>
Дальше будем позиционировать надписи, просто подбирая в системе X/Y нужные координаты, делать подбор удобно в Chrome / Инструменты разработчика, копируя и вставляя код в файл со стилями.
.left <
position: absolute;
top: 26%;
left: 6%;
>
.center <
position: absolute;
top: 17%;
left: 42%;
>
.right <
position: absolute;
top: 1%;
right: 27%;
>
Мы задали координаты не в пикселях, а в % не случайно, при уменьшении размеров экрана, тогда текст будет оставаться там же, где мы его закрепили. Это хорошая новость, а плохая это то, что размер текста не уменьшается вместе с картинкой. Картинка сама уменьшается, а текст надо уменьшать принудительно.
Медиа-запросы
На разрешении равным или меньше 768 пикселей, уменьшить размер шрифта до 150%. Откуда мы узнали, что надо уменьшать именно на 768 пикселях? Через инспектор кода, мы увидели, на какой отметке текст наскакивает на соседние элементы.
@media screen and (max-width: 768px) <
.container <
font-size: 150%;
>
>
Одного запроса оказалось недостаточно, уменьшили размер текста и на 470 пикселях.
@media screen and (max-width: 470px) <
.container <
font-size: 90%;
>
>
Конечный результат
Посмотрите на реальной странице, как прекрасно смотрится текст на картинке на разных разрешениях.
Демонстрация.
Из данного видео-курса «HTML5 и CSS3 с Нуля до Гуру»вы получите систематизированные знания о том, как делаются сайты, на простых примерах.
Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!
Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.
Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления
Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.
Порекомендуйте эту статью друзьям:
Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):
Комментарии ( 0 ):
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.
Copyright © 2010-2021 Русаков Михаил Юрьевич. Все права защищены.
Как сделать в HTML подпись под картинкой?
Дата публикации: 2016-08-24
От автора: как сделать в html подпись под картинкой? Действительно, как? С первого взгляда все кажется проще некуда, но на деле не каждый может сам додуматься до того, как же все-таки разместить текст ровно под картинкой, ведь она является строчным элементом.
Самый примитивный вариант
Сразу после изображения поставьте тег br и напишите нужный текст. Конечно, он не будет располагается по центру, но зато будет под картинкой, так что его уже можно назвать подписью. Вариант не годится для тех случаев, когда фото располагается в строке не в самом начале, потому что в таком случае по напечатанному тексту непонятно будет, к чему он вообще относится.
Тег br ставить необязательно, можно просто заключить подпись в тег абзаца, тогда текст сам перенесется на следующую строку, так как абзац – блочный элемент.
Ладно, это был самый простой способ, который не всегда подойдет, поэтому предлагаю рассмотреть более правильные.
Соединение изображения и подписи в блок
Все очень просто. Мы поместим картинку и подпись к ней в отдельный блок.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
При таком способе вы легко сможете выровнять текст подписи ровно по центру изображения, но при этом нужно ограничить ширину главного контейнера, поставить ее ровно такой, каковой является ширина изображения:
В моем случае это 200 пикселей.
Использование тега figure
Следующее решение является наиболее оптимальным, так как в нем используются теги html5 – figure и figcaption. Они предназначены для группировки каких-либо элементов вместе.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
По сути, нам даже практически полностью подходит код предыдущего примера, нужно только заменить div на figure и p на figcaption:
Все остальное актуально и для этого варианта. В частности, само по себе нахождение текста в теге figcaption не выравнивает его по центру. Чтобы выровнять, нужно сделать то же самое, что мы делали в предыдущем способе. Я изменил цвет текста, чтобы подпись в этом примере хоть чем-то отличалась от того, что мы сделали в предыдущем примере.
Как видите, оба способа дают одинаковый результат. Ну и еще 1 вариант вдогонку
В этом примере не нужно помещать картинку и подпись в блок или фигуру, они могут быть просто самостоятельными элементами, но при этом должны стоять друг за другом в разметке.
Теперь стилевой класс я прописал не блоку, а изображению, потому что блока то и нет. Вся загвоздка тут в стилях, вот они:
Значит, мы делаем наше изображение блочным. В принципе, в случае с абзацем это было делать необязательно, но если бы подпись вы бы писали, например, в теге span, то необходимость задать блочное поведение была бы, потому что иначе картинка и подпись находились бы на одной строке.
Результат аналогичен предыдущим способам, даже скриншот не буду показывать. Что ж, это все способы сделать в html подпись под изображением, которые я хотел вам показать. Дело то на самом деле очень мелочное, поэтому особо над его решением нет смысла задумываться, просто выбирайте любой способ и делайте.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Как в Ворде наложить текст на картинку
При подготовке текстовых документов, в которых используются поясняющие фотографии, возникает необходимость подписи этих самых изображений. Удобнее всего этого сделать под или над картинкой, но это не всегда возможно из-за ограничений по количеству символов или числа страниц документа. Эта статья о том, как текст наложить на картинку в ворде. Стоит отметить, что механизм этой процедуры идентичен для версий редактора от 2007 до 2016 года.
Текстовый блок
Чтобы наложить текст на рисунок с использованием специальных блоков нужно проделать следующее:
Обтекание текстом
Чтобы написать на картинке описание можно использовать функцию положения или обтекание текстом. Найти их можно во вкладке Формат на Панели инструментов.
В строке Обтекание выбираете строку За текстом и картинка будет на заднем фоне, поверх которой можно писать любой текст.
Совет! Чтобы сразу увидеть результат применения настройки обтекания можно воспользоваться функцией Положение.
Поочередно выбирая предложенные варианты, наблюдаете за изменениями и используете тот, который подходит лучше всего.
Вордарт
Чтобы создать красивую подпись фотографии можно воспользоваться инструментом WordArt. Для этого нужно проделать следующие действия:
Рекомендация! Чтобы меньше возникало проблем с размещением блока, рекомендуем объект вордарт поставить на передний план, а изображение — на задний.
Как видите, существует достаточно много способов добавить текст на картинку в ворд. Такие возможности текстового редактора позволяют экономить время при написании документов. При этом необходимость использования программ для работы с графикой, так называемых графических редакторов, отпадает полностью.
Как вставить текст в картинку в Ворде
Что обычный пользователь делает, когда в документе Word нужно поместить текст на изображении? Правильно, применяет разные графические редакторы от стандартного Paint до мощного PhotoShop, а на это тратится время и результат может не порадовать. Но существует несколько вариантов вставки в картинку текста в ворде, который будет смотреться оригинально, в самом Word не прибегая к применению других программ.
Приведенная инструкция познакомит с приемами создания любых надписей на изображении.
Способ №1: текстовый блок
Итак, предположим, что в документе уже присутствует нужный рисунок и на нем осталось лишь разместить несколько предложений или список. Как это сделать? Для каждого релиза текстового редактора схема отличается, но незначительно.
После этого развернется меню с набором готовых шаблонов. Тут нажмите «Простая надпись» (это будет первый пример в окне). В результате на листе отобразится рамка с образцом текста.
Далее, перетащите полученный объект на картинку. Для этого наведите курсор на обрамление, стрелка поменяет вид на черный крестик. Зажмите левую кнопку и, не отпуская ее, передвиньте блок в требуемое место на рисунке.
Пока вы получите белое поле, обрамленное черной рамкой. Напечатайте вместо примера текста нужный фрагмент и отформатируйте его согласно своим требованиям (величину шрифта, цвет, стиль и прочее). Размеры блока тоже изменяются. Его можно расширить или уменьшить.
Теперь надо убрать белый фон и обрамление. Для этого просто кликните по надписи и перейдите во вкладку «Формат». Отыщите и щелкните в группе «Стили» по кнопке «Заливка фигуры». Выпадет меню, где выберите пункт «Нет заливки», и фон отключится.
Осталось убрать рамку. В этой же группе кликните «Контур фигуры», а в списке нажмите «Нет контура». Команда отключает обрамление.
Стандартными средствами Word можно создать хорошо оформленную подпись, любого цвета, стиля, размера. Это гораздо удобней и быстрей, чем пользоваться графическими редакторами.
Способ №2: объект Вордарт
Есть еще один интересный прием создания надписи — вставка объекта WordArt. По сути, это такое же текстовое поле, только имеющее более интересную стилизацию шрифта (с тенью, отражением, объемом и так далее).
Во вкладке «Вставка» щелкните кнопку «Добавить объект WordArt» в виде голубой повернутой буквы А. Отобразятся наглядные примеры. Выберите, что подходит к изображению и просто кликните по образцу.
Теперь введите нужную информацию в блоке и перетащите полученное на картинку.
Способ №3: обтекание текстом
Метод хорош в том случае, когда рисунок используется в качестве подложки страницы целиком.
На вставленной картинке щелкните правой кнопкой и выберите в контекстном меню строку «Обтекание текстом». Далее, нажмите пункт «За текстом».
Теперь наполняйте документ как обычно. Только фоном будет служить рисунок, а не стандартный белый цвет.
С помощью приведенных приемов вы легко сделаете отлично оформленный текст на картинке. При этом надобность в использовании графических редакторов отпадает.