Как написать текст внизу картинки - Правописание и грамматика

От автора: как сделать в html подпись под картинкой? Действительно, как? С первого взгляда все кажется проще некуда, но на деле не каждый может сам додуматься до того, как же все-таки разместить текст ровно под картинкой, ведь она является строчным элементом.

Самый примитивный вариант

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

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

Ладно, это был самый простой способ, который не всегда подойдет, поэтому предлагаю рассмотреть более правильные.

Соединение изображения и подписи в блок

Все очень просто. Мы поместим картинку и подпись к ней в отдельный блок.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

<p>Лягушка</p>

</div>

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

.frog p{

text—align: center;

}

.frog{

max—width: 200px;

}

В моем случае это 200 пикселей.

С помощью селектора .frog p вы можете применить дополнительные стили к подписи.

Использование тега figure

Следующее решение является наиболее оптимальным, так как в нем используются теги html5 – figure и figcaption. Они предназначены для группировки каких-либо элементов вместе.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

По сути, нам даже практически полностью подходит код предыдущего примера, нужно только заменить div на figure и p на figcaption:

<figcaption>Лягушка</figcaption>

</figure>

Все остальное актуально и для этого варианта. В частности, само по себе нахождение текста в теге figcaption не выравнивает его по центру. Чтобы выровнять, нужно сделать то же самое, что мы делали в предыдущем способе. Я изменил цвет текста, чтобы подпись в этом примере хоть чем-то отличалась от того, что мы сделали в предыдущем примере.

Как видите, оба способа дают одинаковый результат. Ну и еще 1 вариант вдогонку

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

<p>Лягушка</p>

Теперь стилевой класс я прописал не блоку, а изображению, потому что блока то и нет. Вся загвоздка тут в стилях, вот они:

.frog{

display: block;

}

.frog + p{

width: 200px;

text—align: center;

}

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

Ну а чтобы выровнять подпись по центру картинки, мы даем ему ширину картинки и выравнивание текста по центру. Заметьте, какой селектор я использовал. Такие селекторы называются соседними. Например: .frog + p – будет выбран абзац, который лежит в html-разметке сразу за элементом с классом frog.

Результат аналогичен предыдущим способам, даже скриншот не буду показывать. Что ж, это все способы сделать в html подпись под изображением, которые я хотел вам показать. Дело то на самом деле очень мелочное, поэтому особо над его решением нет смысла задумываться, просто выбирайте любой способ и делайте.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Верстка. Быстрый старт

Практический курс по верстке адаптивного сайта с нуля!

Смотреть

Источник

Особенности взаимодействия HTML изображения и текста

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

В предыдущем уроке мы рассмотрели метод вывода HTML изображения с расширением .jpg на web-страницу и то, как установить дополнительное расстояние между ним, и текстом. Продолжим наше знакомство с тегом <img /> и особенностями его взаимодействия с элементами текста.

Навигация по странице

Текст вверху, внизу, по центру изображения на HTML странице сайта
HTML изображение слева – текст справа
HTML изображение справа – текст слева

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

Пример:

<html> <head> <title>HTML текст вверху, внизу, по центру изображения</title> </head> <body> <p><img src="../images/2121.png" width="128" height="128" align="top" />Текст вверху изображения</p> <p><img src="../images/2121.png" width="128" height="128" align="middle" /> Текст по центру изображения</p> <p><img src="../images/2121.png" width="128" height="128" align="bottom" /> Текст внизу изображения</p> </body> </html>

Результат:

Посмотреть в новом окне: HTML С‚РµРєСЃС‚ РІРІРµСЂС…Сѓ, РІРЅРёР·Сѓ, РїРѕ С†РµРЅС‚СЂСѓ РёР·РѕР±СЂР°Р¶РµРЅРёСЏ

Атрибуты и значения

align="top" – выравнивает изображение и текст по верху.
align="middle" – выравнивает изображение и текст по центру, по вертикали.
align="bottom" – выравнивает изображение и текст по низу.

Напомню, что для web применимы изображения трех форматов: PNG (.png), JPEG (.jpg) и GIF (.gif).

Обратите внимание на способ подгрузки изображения: ../images/2121.png. Во-первых, использован формат PNG (.png). Во-вторых, изображение находится в отдельной папке, то есть документ у меня в одной папке, а изображение в другой.

В таких ситуациях очень важно правильно указать путь от документа к подгружаемой картинке, что и было сделано: первые две точки .. определяют выход из папки где находится документ (все уроки, они же страницы, они же документы курса по HTML у меня находятся в одной папке, CSS – в другой, изображения – в третьей и так далее); /images/ – не что иное, как название папки с изображениями, а 2121.png – полное имя файла самого изображения.

Пример:

<html> <head> <title>HTML изображение слева – текст справа</title> </head> <body> <img src="../images/2121.png" align="left" width="128" height="128" /> <p>Изображение обтекает текст слева</p> <p>Изображение обтекает текст слева</p> <p>Изображение обтекает текст слева</p> <p>Изображение обтекает текст слева</p> </body> </html>

Результат:

Посмотреть в новом окне: HTML РёР·РѕР±СЂР°Р¶РµРЅРёРµ РѕР±С‚РµРєР°РµС‚ С‚РµРєСЃС‚ СЃР»РµРІР°

HTML изображение справа – текст слева

Пример:

<html> <head> <title>HTML изображение справа – текст слева</title> </head> <body> <img src="../images/2121.png" align="right" width="128" height="128" /> <p>Изображение обтекает текст справа</p> <p>Изображение обтекает текст справа Изображение обтекает текст справа. Изображение обтекает текст справа. Изображение обтекает текст справа. Изображение обтекает текст справа. Изображение обтекает текст справа</p> </body> </html>

Результат:

Посмотреть в новом окне: HTML РёР·РѕР±СЂР°Р¶РµРЅРёРµ РѕР±С‚РµРєР°РµС‚ С‚РµРєСЃС‚ СЃРїСЂР°РІР°

ab-w.net

Как сделать надпись под картинкой

Кроме содержания атрибутов alt и title при поиске по картинкам используются тексты, находящиеся в непосредственной близости от изображения. Часто это выглядит как:

Когда-нибудь котёнок выберется из лужи

  <style> figure.img {  margin: 0;  text-align: center; } figure.img img {   max-width: 100%;  height: auto; } figure.img figcaption {   padding: 0 1%;  font: italic 90% Georgia,serif; } </style>  <figure class="img">  <img alt="котёнок мечтает стать львом" src="http://4.bp.blogspot.com/-uXTQrdgmR5A/TVOtm4AfAzI/AAAAAAAABcA/ZPY0DjhgY0o/s00/mechty.jpg" height="400" width="302">  <figcaption>Когда-нибудь котёнок выберется из лужи</figcaption> </figure>

Автоматическая нумерация картинок

К стилю выше дописать [доп.информация про счётчики CSS]:

body {  counter-reset: figures; } figure.img figcaption {  counter-increment: figures; } figure.img figcaption:before {  content: 'Рис.' counter(figures) ' '; }

Изображение с подписью в рамке

Общий CSS стиль:

<style> figure.img {  max-width: 100%;  margin: 0 auto;  box-shadow: 0 0 0 5px #fff, 0 0 4px 5px;  } figure.textizo {  width: fit-content;  } figure.izo {  width: min-content;  } figure.img img {  display: block;  max-width: 100%;  height: auto;  margin: 0 auto; } figure.img figcaption {  max-width: 100%;  padding: 0 1%;  font: italic 90% Georgia,serif; } </style>

Текст длиннее изображения. Если картинка располагается по центру, то хочется использовать всё пространство родительского блока.

Когда-нибудь котёнок выберется из лужи

<figure class="img textizo">  <img alt="котёнок мечтает стать львом" src="http://4.bp.blogspot.com/-uXTQrdgmR5A/TVOtm4AfAzI/AAAAAAAABcA/ZPY0DjhgY0o/s00/mechty.jpg" height="400" width="302">  <figcaption>Когда-нибудь котёнок выберется из лужи</figcaption> </figure>

Когда нужно чтобы ширина контейнера была не больше ширины картинки (для Google Chrome см. код ниже, для него нужно обязательно указывать width для figcaption ?!).

Когда-нибудь котёнок выберется из лужи

<figure class="img izo">  <img alt="котёнок мечтает стать львом" src="http://4.bp.blogspot.com/-uXTQrdgmR5A/TVOtm4AfAzI/AAAAAAAABcA/ZPY0DjhgY0o/s00/mechty.jpg" height="400" width="302">  <figcaption>Когда-нибудь котёнок выберется из лужи</figcaption> </figure>

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

Длинное, очень длинное, длинное-предлинное описание

<figure class="img izo">  <img src="http://4.bp.blogspot.com/-eJraU5lCufs/UFa8PpMUv8I/AAAAAAAADLQ/Y5SGHBd91-Q/s1600/smail-bolshoi-palets-vverh.gif" alt="Смайлик большой палец вверх" height="104" width="147"/>  <figcaption style="width: 300px;">Длинное, очень длинное, длинное-предлинное описание</figcaption> </figure>

HTML подпись под картинкой, появляющаяся после наведения курсора мышки

К CSS выше добавить:

figure.hover {  position: relative; } figure.hover figcaption {  position: absolute;  left: 0;  top: calc(100% + 5px);  width: available;   visibility: hidden;  background: #fff;  box-shadow: 0 0 0 5px #fff, -5px 0 4px, 5px 0 4px, 0 5px 4px; } figure.hover:hover figcaption {  visibility: visible; }

Когда-нибудь котёнок выберется из лужи

<figure class="img izo hover">  <img alt="котёнок мечтает стать львом" src="http://4.bp.blogspot.com/-uXTQrdgmR5A/TVOtm4AfAzI/AAAAAAAABcA/ZPY0DjhgY0o/s00/mechty.jpg" height="400" width="302">  <figcaption style="width: 302px;">Когда-нибудь котёнок выберется из лужи</figcaption> </figure>

Несколько фотографий и одно описание

Про тег figure и figcaption хорошо написано у html5doctor.com: статья 1 (в комментариях тоже можно найти интересные моменты), статья 2, а также следует прочитать первоисточник w3.org. Словом, так тоже будет верно:

Когда-нибудь котёнок выберется из лужи. По крайне мере одному уже удалось из гадкого утёнка превратиться в величавую птицу

<style> figure.img {  max-width: 100%; } figure.izo {  width: min-content;  margin: 0 auto; } figure.tri figure {  width: 100%;  margin: 0;  letter-spacing: 6px;  white-space: nowrap; } figure.img img {  height: auto;  margin: 0 auto; } figure.tri img {.  

 " src="http://1.bp.blogspot.com/-zieFTVCUOhk/UrLBvVdmQnI/AAAAAAAAEOg/_HXG_LQSpfE/s320/gadkiy-utenok.jpg">  <img alt="гадкий утёнок смотрит в воду, он стал лебедем" src="http://4.bp.blogspot.com/-R4BCZt_KHWY/UrLAiZDDnzI/AAAAAAAAEOQ/U2WFegtrfi8/s00/gadkii-utenok.jpg">  </figure>  <figcaption>Когда-нибудь котёнок выберется из лужи. По крайне мере одному уже удалось из гадкого утёнка превратиться в величавую птицу</figcaption> </figure>

shpargalkablog.ru

Каждый день на форумах html новички спрашивают: «Как разместить текст поверх изображения?». Некоторые находят неправильный выход: они рисуют текст на картинке в графических редакторах, после чего размещают изображение с текстом в html документах. Но что делать, если текст надо заменить? Опять перерисовывать картинку? Есть более простые решения.

Используя методы, описанные в уроке, мы можем получить такой результат:

Подготовка

Возьмём картинку

Её размер — 350px × 200px. И этой информации достаточно для того, чтобы приступить к работе.
Теперь попробуем разместить поверх неё текст несколькими способами.

Способ первый: картинка как фон div

Сразу оговорюсь, что этот способ мне самому не нравится из-за примитивного конечного результата, но тем не менее он существует, поэтому я расскажу о нём.

Суть способа заключается в том, что мы берём тег div, задаём ему размеры, совпадающие с размером изображения, и устанавливаем картинку в качестве фона.
Обратите внимание, что размер тега = собственный размер + размер отступов padding. Таким образом, если мы хотим сделать отступ содержимого от края картинки на 20px, то размер самого div нужно указать на эти 20px меньше. То есть: 350-20 = 330 в ширину и 200-20 = 180 в высоту.

      <div class="example1">Текст</div>

.example1 {  		padding-top:20px;  		width:330px;  		padding-left:20px;  		height:180px;  		background-image:url("/examples/20120821/bg.png");  		  		/*оформление текста*/  		color:#FFF;  		font-family:Arial, Helvetica, sans-serif;  		font-size:40px;	  	}

Результат:

Способ простой по структуре хтмл кода (требуется всего один тег), но зато он не позволяет задать тексту какие-то особые стили. В результате чего может получиться так, что текст будет сложно прочитать. Кроме того, блок жёстко привязан к размерам картинки, а значит, в случае изменения картинки придётся переписывать и css

Способ второй: наложение двух тегов друг на друга

Суть этого способа в том, что мы делаем div-контейнер, который будет содержать в себе картинку и текст. При этом текст мы будем позиционировать относительно левого верхнего угла контейнера.

    <div class="example2">   <img src="/examples/20120821/bg.png" class="example_beauty">   <span>Текст</span>  </div>

.example2 {  	display:inline-block;	  	position:relative;    }  .example2 span {  	display:inline-block;  	position:absolute;  	top:30px;	  	left:0px;  	  	/* Оформление текста */  	color:#FFF;  	font-family:Arial, Helvetica, sans-serif;  	font-size:20px;	  	  	/* Фон */  	background-color:rgba(0,0,0,.4);  	padding:10px 30px;  }

.example2:
display:inline-block нам нужен, чтобы контейнер не растягивался по ширине на всю страницу.
position:relative заставляет все вложенные блоки с position:absolute вести отсчёт координат своего положения не от окна браузера, а от блока .example2.

.example2 span:
display:inline-block — для того, чтобы стили, относящиеся к блочным элементам, могли быть применены к нашему тексту.
position:absolute — для вынимания тега из общего потока и дальнейшего его размещения с помощью задачи конкретных координат. top, left — отступы сверху и слева (координаты). возможно вместо них использовать bottom (снизу) и right (справа)

Результат:

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

Играя с css и структурой тегов можно добиться и такого результата:

Данный результат довольно неплохо подходит для оформления галлерей, витрин интернет-магазинов и прочих сервисов.

Код последнего результата:

    <div class="example3">   <img src="/examples/20120821/bg.png" class="example_beauty" />       <div class="example_text">    <h6>Я - заголовок</h6>       <span>А я - комментарий к этой прекрасной картинке. Я такой длинный, что занимаю несколько строчек.</span>   </div>      </div>

.example3 {  	display:inline-block;	  	position:relative;  }  .example3 .example_text {  	display:block;  	position:absolute;  	left:0;  	bottom:0;  	width:100%;  	box-sizing:border-box;  	-moz-box-sizing: border-box;  	-webkit-box-sizing: border-box;  	box-sizing: border-box;   	  	color:#fff;  		  	padding:10px;  	background-color:rgba(0,0,0,.3);    	  }  .example3 h6 {  	font-family:Arial, Helvetica, sans-serif;  	font-size:18px;  }  .example3 span {  	font-size:12px;	  }

borpost.ru

Самый примитивный вариант

Соединение изображения и подписи в блок

Все очень просто. Мы поместим картинку и подпись к ней в отдельный блок.

В моем случае это 200 пикселей.

С помощью селектора .frog p вы можете применить дополнительные стили к подписи.

Использование тега figure

Как видите, оба способа дают одинаковый результат. Ну и еще 1 вариант вдогонку

webformyself.com

Internet Explorer	Chrome	Opera	Safari	Firefox	Android	iOS
6.0+	1.0+	9.0+	1.0+	1.0+	1.0+	1.0+

Задача

Добавить под фотографией подпись так, чтобы они одновременно обтекались близлежащим текстом.

Решение

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

Чтобы связать фотографию и подпись к ней воедино, их следует поместить в один блок и присвоить ему имя класса, к которому будут применяться стилевые параметры. Такой блок можно выравнивать по правому или левому краю, добавляя стилевое свойство float со значением right или left, а также задавать цвет фона и параметры рамки (пример 1).

Пример 1. Подпись под фотографией

HTML5CSS 2.1IECrOpSaFx

<!DOCTYPE html> <html>  <head>  <meta charset="utf-8">  <title>Подрисуночная подпись</title>  <style>  .sign {  float: right; /* Выравнивание по правому краю */  border: 1px solid #333; /* Параметры рамки */  padding: 7px; /* Поля внутри блока */  margin: 10px 0 5px 5px; /* Отступы вокруг */  background: #f0f0f0; /* Цвет фона */   }  .sign figcaption {  margin: 0 auto 5px; /* Отступы вокруг абзаца */  }  </style>  <!--[if lt IE 9]>  <script>  document.createElement('figure');  document.createElement('figcaption');</script>  <![endif]-->  </head>  <body>  <figure class="sign">  <p><img src="images/helen.jpg" width="150" height="212" alt="Скульптура"></p>  <figcaption>Деревянная скульптура</figcaption>  </figure>  <p>Точность крена эллиптично позволяет пренебречь колебаниями корпуса, хотя этого   в любом случае требует нестационарный успокоитель качки, исходя из общих теорем   механики. Прецессия гироскопа трудна в описании. Ось собственного вращения, в   силу третьего закона Ньютона, не входит своими составляющими, что очевидно, в   силы нормальных реакций связей, так же как и курс, даже если не учитывать выбег   гироскопа. Однако исследование задачи в более строгой постановке показывает, что   ошибка характеризует прецизионный гироскопический маятник, что видно из уравнения   кинетической энергии ротора.</p>  </body> </html>

Результат данного примера показан на рис. 1. Для блока используется тег <figure>, а для подписи к изображению тег <figcaption>. Старые версии IE не понимают эти теги, поэтому специально для них добавляется небольшой скрипт.

Рис. 1. Фотография с подписью, выровненная по правому краю страницы

Поскольку в нашем случае ширина блока с фотографией не задавалась, то она будет определяться автоматически исходя из размера изображения и подписи к нему. Как видно на рис. 1 такой подход приводит к тому, что отступы слева и справа от фотографии получаются разными. Исправляется данная особенность добавлением к стилям блока свойства width с фиксированным значением.

htmlbook.ru

Код html:

<div class="container">   <img src="/images/article/21/bg.jpg" alt="background-image">   <div>Белым снегом все покрыло:   И деревья и дома,   Свищет ветер легкокрылый:   «Здравствуй, зимушка-зима!»   </div>  </div>

Код css:

.container {   display:inline-block;    position:relative;  }  .container div {    display: inline-block;    position: absolute;    bottom: 10px; left: 0px;    background-color: rgba(0,0,0,.4);    padding: 5px 5px 5px 10px;   color: white  }

container:

display: inline-block — нам нужен, чтобы контейнер не растягивался по ширине на всю страницу.
position: relative — заставляет все вложенные блоки с position: absolute вести отсчёт координат своего положения не от окна браузера, а от блока .container

container div:

display: inline-block — для того, чтобы стили, относящиеся к блочным элементам, могли быть применены к нашему тексту.
position: absolute — для размещения блок с помощью конкретных координат: bottom, left — отступы снизу и слева (координаты) возможно вместо них использовать top (сверху) и right (справа)

Показываем описание при наведении на картинку

Показанный выше способ можно использовать для отображение текста при наведении картинку мышкой (может пригодиться для описания товаров в интернет-магазине).

Код css будет выглядеть следующим образом (код html не изменился):

.container {   display:inline-block;    position:relative;  }  .container div {    display: none;   position: absolute;    bottom: 10px; left: 0px;    background-color: rgba(0,0,0,.4);    padding: 5px 5px 5px 10px;   color: white  }  .container:hover div {   display: block   }

itzx.ru

В данной статье рассмотрим способы размещения текста под картинкой в html документе. Существует несколько разных вариантов как выполнить данную задачу.

Начнем с самого правильного и нового.

В html 5 добавлен новый тег <figure>. Данный тег используется для разметки независимого блока с демонстрационными материалами будь то, графики, изображения, куски кода и т.д.

Такие материалы сопровождаются подписями — комментариями разъясняющими информацию на изображении. Для этих целей используется тег <figcaption> который размещается внутри <figure> в начале или в конце.

Посмотрим на новые теги в действии.

<figure class="image">  <img src="up.png">   <figcaption>текст под картинкой</figcaption>  </figure>

Внутри тега <figure> мы разместили картинку и подпись. Теперь применим CSS стили.

figure{  	position: relative;   width: 300px;   margin: 20px auto;   border-radius: 5px;    box-shadow: 0 0 5px #999999;      }      .image figcaption{     padding: 15px 5%;   text-align: center;  }    /*если картинка больше чем 300px, то стоит добавить еще и эти стили*/  figure img{  width: 300px;  }

В итоге получаем картинку с размещенной подписью под ней.

текст под картинкой

Полный пример кода страницы с картинкой.

<html>  <body>  <head>    <style>  figure{   position: relative;   width: 300px;   margin: 20px auto;   border-radius: 5px;    box-shadow: 0 0 5px #999999;      }  figure img{  width: 300px;  }    .image figcaption{     padding: 15px 5%;   text-align: center;  }  </style>  </head>  <figure class="image">  <img src="3.jpg">   <figcaption>текст под картинкой</figcaption>  </figure>  </body>  </html>

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

Рассмотрим еще один способ добавления подписи под изображение с помощью html таблиц.

Создадим простую таблицу с двумя строками содержащих 1 ячейку.

<table>  <tr><td><img src="kotik.png"></td></tr>  <tr><td>текст под картинкой</td></tr>  </table>

Применим стили для текста и изображения.

td{  	  	text-align: center; // выравнивание текста по центру  }  td img{  	width: 300px; // ширина картинки в ячейке  }

текст под картинкой

Данный способ так же имеет право на существование и даже много где используется, однако лучше использовать первый способ с <figure> и <figcaption>

Надеюсь , что статья была Вам полезна. До новых встреч!

goodweb.me

У меня недавно стал вопрос, как сделать текст поверх картинки. Тогда я мог с уверенностью сказать, что так сделать нельзя. И конечно же оказался неправ. Это реально сделать, причем не затрачивая на это много усилий! Потому что это самое простое что можно сделать…

И так, для начала создадим саму картинку.

<img src="url images" />

Есть картинка, поверха которой нужно сделать текст. Мы сделаем это с помощью «position». Но для начала, что оно из себя представляет.

Position — Устанавливает способ позиционирования, относительно родителя.

position: absolute; — задает абсолютное свободное позиционирование. Значения атрибутов bottom, left, right и top при этом задают абсолютные координаты элемента страницы относительно родителя.
position: relative; — задает относительное свободное позиционирование. Значения атрибутов bottom, left, right и top при этом задают смещение координат элемента страницы от точки, в которой он был отображен, будь атрибут position установлен в static.
position: static; — (значение по умолчанию) задает статическое позиционирование, при котором элемент страницы отображается внутри общего «потока» текста, т.е. не свободно. Значения атрибутов bottom, left, right и top при этом не принимаются Web-обозревателем во внимание.

Хм… Если вы делаете только одно изображение на всю страницу, то выгодно будет пользоваться absolute, так как он позволит выбрать положение по всему экрану.
А если вам нужно будет сделать маленькую картинку в нутри тега <div> или в таблице, то лучше воспользоваться relative.

Мне нужно было сделать так как во втором примере. Делаем текст, который в дальнейшем будет находится на картинке. Вот пример:

<div width="10%"><br /> <img src="logo.jpg"><br /> <div>Текст поверх картинки</div><br /> </div>

После этого кода получается текст ниже картинки. Чтобы он стал на картинке, задаем ему position:relative;

<div width="100%"><br /> <img src="logo.jpg"><br /> <div style="position:relative;bottom:100px;">Текст поверх картинки</div><br /> </div><br />
bottom:100px; — показывает настройки расположения текста. Настраивайте под свой вкус ;).

Ну вот и все… Надеюсь полезен был урок!

С уважением, Vasilenko Ivan!

bitby.net

Источник

Excel для Microsoft 365 Word для Microsoft 365 Outlook для Microsoft 365 PowerPoint для Microsoft 365 Excel 2021 Word 2021 Outlook 2021 PowerPoint 2021 Excel 2019 Word 2019 Outlook 2019 PowerPoint 2019 Excel 2016 Word 2016 Outlook 2016 PowerPoint 2016 Excel 2013 Word 2013 Outlook 2013 PowerPoint 2013 Еще…Меньше

Функция вставки субтитров в Word упрощает регулярное добавление подписей к изображениям в документе.

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

Word

Щелкните рисунок, к которому вы хотите добавить подпись.
Щелкните ссылки > вставить заголовок.
Чтобы использовать метку по умолчанию (рисунок), введите заголовок в поле заголовка .

Совет: Вы также можете создать собственную подпись заголовка по умолчанию, щелкнув «Создать метку «, а затем добавив подпись в поле «Метка «. Word автоматически нумеруются новые метки.

Все остальные Office приложения

Чтобы нарисоватьполе рядом с рисунком, используйте > «Вставка текстового поля». ( Дополнительные сведения см. в разделе «Добавление текстового поля».)
Щелкните внутри текстового поля и введите текст, который вы хотите использовать для заголовка.
Выделите текст. На вкладке « Главная» используйте параметры « Шрифт», чтобы стиль заголовка был нужным.
Нажмите клавиши CTRL+ для выбора рисунка и текстового поля, а затем на вкладке «Формат рисунка» в группе «Упорядочить» выберите группу > группу.

См. также

Группирование и разгруппирование объектов

Нужна дополнительная помощь?

Источник

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

(Если наоборот, картинка дополняет текст, например, изображение товара в инет магазине, то разметка будет другой. Название товара будет заголовком, дальше текст и т.д.)

Если картинка это украшение (иконка), то таких изображений не должно быть в разметке.
Они вставляются как фоны или псевдоэлементы через стили.

Не знаю, может поможет
Суть в том что ты должен задать класс для одного общего контейнера, потом разместить картинки внутри этого контейнера. После чего уже нужно картинки обернуть еще одним div-контейнером и добавить span для текста. Затем в стилях в фале например style.css описать классы. Как отметил dethain можно использовать flexbox. что мы и сделали.

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Flex</title>
	<link rel="stylesheet" href="style.css"> <!-- тут файл со стилями -->

<style>
/*

но мы напишем стили тут.

*/	
.__kakoy_to_class {
	display: flex;
	flex-wrap: wrap;
	width: 75%;
	margin: 0 auto;
}
.__item{
	width: 150px;
	height: 150px;
	margin: 20px;
	text-align: center;
}
.__kakoy_to_class img{
	width: 100%;
	height: auto;
}
.__item span{
	color:  red;
	width: 100%;
	width: 100%;
}
</style>
</head>

<body>
	<div class="__kakoy_to_class"> <!-- это главный контейнер, здесь нужно задать класс для последующей стилизации например в файле style.css -->
		<div class="__item">
			<img src="https://via.placeholder.com/150" alt="">
			<span>Text</span>
		</div>
		<div class="__item">
			<img src="https://via.placeholder.com/150" alt="">
			<span>Text</span>
		</div>
		<div class="__item">
			<img src="https://via.placeholder.com/150" alt="">
			<span>Text</span>
		</div>
		<div class="__item">
			<img src="https://via.placeholder.com/150" alt="">
			<span>Text</span>
		</div>
		<div class="__item">
			<img src="https://via.placeholder.com/150" alt="">
			<span>Text</span>
		</div>

		<div class="__item">
			<img src="https://via.placeholder.com/150" alt="">
			<span>Text</span>
		</div>
		<div class="__item">
			<img src="https://via.placeholder.com/150" alt="">
			<span>Text</span>
		</div>
		<div class="__item">
			<img src="https://via.placeholder.com/150" alt="">
			<span>Text</span>
		</div>
		<div class="__item">
			<img src="https://via.placeholder.com/150" alt="">
			<span>Text</span>
		</div>
		<div class="__item">
			<img src="https://via.placeholder.com/150" alt="">
			<span>Text</span>
		</div>
	</div><!-- тут заканчивается главный контейнер div -->
</body>
</html>

Источник

Всем привет!
В сегодняшней статье я расскажу, как сделать подпись под картинкой в HTML5.
Что такое подпись под картинкой и как же она выгладит?
Это обычная картинка, под которой внизу размещается краткий текст с описанием:

Чтобы создать такую подпись под картинкой, в HTML5 придумали специальные теги:

тег «figure» создан для группировки HTML изображений и подписей под ними;
тег «figcaption» создан для подписи под изображением.

Синтаксис:

<figure>
<img src = "картинка">
<figcaption>Подпись к картинке </figcaption>
</figure>

Пример:

<figure>
<img src = "bloggood-ru.jpg">
<figcaption>Автор блога bloggood.ru </figcaption>
</figure>

Результат:

Внешний вид, конечно, можно подправить, если использовать таблицу стилей CSS.
Добавьте вот такой стиль CSS:

figure {
border: 1px solid #ccc; /* рамка */
background-color: #f1f0f0; /* цвет фона */
padding: 5px; /* отступы от картинки */
width: 182px; /* ширина картинки */
}
figcaption {
text-align: center; /* подпись по центру*/
}

В результате получится вот такое:

Так что, для подписи под картинкой не ограничивайте себя только HTML5, для улучшения вида пользуйтесь и CSS-ом.
Удачи!
Подписывайтесь на обновление блога! Вас ждет много интересных статьей.

Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓

Как сделать обтекание картинки текстом в Microsoft Word

Во время работы в MS Word нередко можно столкнуться с необходимостью проиллюстрировать документ с помощью изображений. О том, как просто добавить картинку мы уже писали, как писали и о том, как наложить поверх нее текст. Однако, иногда может потребоваться сделать обтекание добавленной картинки текстом, что немного сложнее, зато и выглядит куда приятнее. Об этом мы и расскажем в этой статье.

Для начала следует понять, что вариантов обтекания текстом картинки существует несколько. Например, текст может быть размещен за изображением, перед ним или по его контуру. Последнее, наверное, наиболее приемлемо в большинстве случаев. тем не менее, метод для всех целей общий, к нему и перейдем.

1. Если в вашем текстовом документе еще нет изображения, вставьте его, воспользовавшись нашей инструкцией.

2. Если это необходимо, измените размеры изображения, потянув за маркер или маркеры, расположенные по контуру. Также, вы можете обрезать изображение, изменить размеры и контур области, в которой оно находится. Наш урок вам в этом поможет.

3. Кликните по добавленному изображению, чтобы на панели управления отобразилась вкладка “Формат”, расположенная в основном разделе “Работа с рисунками”.

4. Во вкладке “Формат” нажмите на кнопку “Обтекание текстом”, расположенную в группе “Упорядочить”.

5. Выберите в выпадающем меню подходящий вариант обтекания текстом:

“В тексте” — изображение будет “покрыто” текстом по всей площади;

“Вокруг рамки” (“Квадрат”) — текст будет расположен вокруг квадратной рамки, в которой находится изображение;

“Сверху или снизу” — текст будет располагаться сверху и/или снизу изображения, область по бокам при этом останется пустой;

“По контуру” — текст будет расположен вокруг изображения. Данный вариант особенно хорош в случае, если изображение имеет круглую или неправильную форму;

“Сквозное” — текст будет обтекать добавленное изображение по всему периметру, в том числе и изнутри;

“За текстом” — рисунок будет располагаться за текстом. Таким образом можно добавить в текстовый документ водяной знак, отличный от стандартных подложек, доступных в MS Word;

Примечание: Если для обтекания текстом будет выбран параметр “За текстом”, после перемещения изображения в нужное место, вы больше не сможете его редактировать, если область, в которой изображение находится, не выступает за пределы текста.

“Перед текстом” — изображение будет расположено поверх текста. В таком случае может возникнуть необходимость изменить цвет и прозрачность рисунка, чтобы текст оставался видимым и хорошо читабельным.

Примечание: Названия, обозначающие разные стили обтекания текстом, в разных версиях Microsoft Word могут отличаться, а вот типы обтекания всегда одинаковы. Непосредственно в нашем примере используется Ворд 2016.

6. Если текст еще не был добавлен в документ, введите его. Если же в документе уже содержится текст, обтекание которым необходимо сделать, переместите изображение на текст и отрегулируйте его положение.

Совет: Экспериментируйте с различными типами обтекания текстом, так как вариант, идеально подходящий в одном случае, может оказаться совершенно неприемлемым в ином.

Как видите, сделать обтекание изображения текстом в Ворде совсем несложно. Кроме того, программа от Microsoft не ограничивает вас в действиях и предлагает несколько вариантов на выбор, каждый из которых может быть использован в различных ситуациях.

Мы рады, что смогли помочь Вам в решении проблемы.

Помимо этой статьи, на сайте еще 11902 инструкций.
Добавьте сайт Lumpics.ru в закладки (CTRL+D) и мы точно еще пригодимся вам.

Отблагодарите автора, поделитесь статьей в социальных сетях.

Опишите, что у вас не получилось. Наши специалисты постараются ответить максимально быстро.

как поставить текст рядом с картинкой

Сообщение о нарушении

Откройте документ Word в который Вам необходимо вставить картинку, вставьте её, выделите вставленную картинку щёлкните правой лапкой мышки на выделенном рисунке и в контекстном меню, выберите необходимое Вам «Обтекание текстом»:

Для примера, выбор «Вокруг рамки», перетаскивая картинку на введённом тексте Вы можете выбрать нужное Вам отображение, например — текст справа от картинки:

текст справа и слева картинки:

текст слева от картинки:

Сообщение о нарушении

295 польз. нашли этот ответ полезным

Был ли этот ответ полезным?

К сожалению, это не помогло.

Отлично! Благодарим за отзыв.

Насколько Вы удовлетворены этим ответом?

Благодарим за отзыв, он поможет улучшить наш сайт.

Как сделать текст вокруг картинки в Word

Размер и положение.

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

Для этого выделяем картинку в документе щелчком правой кнопкой мыши и выбираем из списка пункт «размер и положение». Откроется макет где необходимо перейти на вкладку «обтекание текстом» и выделить квадратик – вокруг рамки .

Теперь можно свободно перемещать картинку в любое место документа word, выравнивая обтекание текста с обоих сторон или вовсе перетащить картинку влево или в право, в зависимости от того как необходимо сделать обтекание. Ниже, коротко приведем несколько пунктов выбора того или иного функционала с подробным их разъяснения. Там всего 6 пунктов, которые в нашем случае, многие из них будут лишними. Однако, для полной картины, рациональнее их будет коротко рассмотреть.

Возможности обтекания макета:

В тексте – без обтекания, только сверху и снизу, причем можно вставить картинку разделив любое предложение;
Вокруг рамки – перемещаем картинку в любое место, обтекая фото текстом «По контуру»;
Сквозное — почти тоже самое что и «По контуру»;
Сверху и снизу – без обтекания, возможность перемещать картинку вверх и вниз;
За текстом – название само говорит за себя;
Перед текстом – изображение всегда спереди, а текст находит за ним.

Не забываем во вкладке «обтекание текстом» перейти в настройки «текст» как показано на втором скриншоте и активировать нужную галочку (вокруг, слева, справа, по большей стороне). Например, если выбрать справа, то при перемещении изображения текст всегда будет выводится только справа. Если вам нужно выровнять текст вокруг, то выбираем соответствующую галочку.

Можно ничего не выбрать, по умолчанию всегда выделено « Вокруг », таким образом картинку перемещаем в любую область, а если нужны точные вхождения, то активировать чекбокс, отвечающий нужным условиям.

Как сделать в word картинку по левому краю, а текст справа

Еще по теме несколько иллюстраций которые показывают, как все проделанное выше сделать еще проще и быстрее – сделать текст справа, а картинку выровнять по левому краю.

Нужно просто произвести правый клик мыши и с под контекста «Обтекание текстом», выбрать из списка – « Квадрат » или нужную вам формулу, по которой и будет происходить форматирование картинки к тексту.

Такой подход быстрее предыдущего, однако, для ознакомления были приведен не один пример для того чтобы охватить тему максимально подробно. Но этом ещё не всё, ниже предоставлен еще один способ для нового Microsoft Word, где проделанные манипуляции становятся еще доступнее из вне, без клик правой кнопки мыши, сразу выбирая нужные действия.

Для этого потребуется выделить картинку и навести указательный курсор в правый верхний угол изображения и кликнуть по нему. Далее остается только навести курсор на нужный блок и прочитать всплывающую подсказку, в нашем случае выберем « Квадрат ». Теперь можно свободно позиционировать изображение в любое нужно место, текст после таких проделанных действий будет обтекать с обеих сторон. Для того чтобы текст оборачивал только правую сторону или левую, достаточно переместить картинку в нужном направлении.

Этот способ еще быстрее, нужно всего выделить картинку и щелкнуть по «Параметры разметки» и выделить первый кубик под названием « квадрат » или просто навести мышку на нужный элемент и дождаться подсказки.

Заключение

В заключение хочется добавить пару слов о том, если данная инструкция вам не помогла или же вы используете старую версию Microsoft Word. По идее должно быть всё одинаково, но если вдруг не помогло и вы не знаете как сделать текст вокруг картинки в Word, существует отличный сервис — onedrive. Это детище компании Microsoft. Теперь вы можете создавать любой документ как в платной версии, только в режиме онлайн, на странице сервиса. Простыми словами, это — бесплатный Microsoft Word! Ничего вам не мешает скачать данный документ себе на компьютер и импортировать в старую версию Word.

Там же можно хранить и все файлы документов и.т.п. Еще на этом сайте можете почитать статью о бесплатном аналоге Microsoft Word – OpenOffice. Данный софт уже вроде не обновляется, более подробно можете почитать о нем тут. Хороший текстовый редактор, в частности довольно хорошо заменяет нами привычный Word.

Напоследок еще одна хорошая статья по теме, как поставить галочку в Word. Еще чуть не забыл, для того чтобы создавать документы в onedrive, нужна бесплатная регистрация.

Источник

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

Некоторые пользователи используют современный графический редактор Photoshop. Но устанавливать (лицензионный Photoshop, естественно, платный) и осваивать этот редактор только ради подписи под фото? Овчинка выделки не стоит.

Содержание:
1. Подпись на фото в Windows 10: видео
2. Как вставить подпись на фото в Windows 7
3. Как сохранить фото с подписью
4. Подпись под фото в Windows XP с видео
5. Как можно отправить фото

К тому же, бывают ситуации, когда Фотошопа нет, а есть фото, на котором нужно быстро поставить подпись под фото.

Самым простым решением вопроса с подписью под фото я считаю простой графический редактор – Paint. Стандартный графический редактор Paint входит в состав Windows 10, 8, 7 и XP.

Подпись на фото в Windows 10: видео

Предлагаю посмотреть видео, при необходимости его можно скачать на свой компьютер.

На рис. 1 показано, как выглядит редактор Paint в Windows 10:

Рис. 1 (кликните по рис. для его увеличения). Графический редактор Paint в Windows 10

Текстовое описание приведено ниже, оно практически не отличается от подписи на фото в семерке.

Как вставить подпись на фото в Windows 7

Чтобы найти редактор Paint в семерке, можно кликнуть по кнопке Пуск и в нижней строке Поиска (там, где написано «Найти программы и файлы») ввести: paint. После этого в окне Поиска появится ссылка на программу Paint, кликаем по ней.

На рис. 2 приведена картинка графического редактора Paint из операционной системы Windows 7 с произвольным рисунком «Горное озеро»:

Рис. 2. Открываем свое фото и вооружаемся инструментом для текста

1) Кликаем по меню Файл (цифра 1 на рис. 2). Появится меню, в котором находим и кликаем по опции «Открыть». Ищем на своем компьютере нужное фото или картинку и открываем ее в редакторе Paint.

2) Щелкаем по инструменту для написания текста, он обозначен буквой «А» (цифра 2 на рис. 2).

После этого переводим курсор мыши на фото и, удерживая там нажатой левую кнопку мыши, одновременно мышкой растягиваем рамку для написания текста. При этом появятся «Инструменты ввода текста» (рис. 3, цифры 1-5).

Рис. 3. Выбираем шрифт, размер, цвет, фон текста. Пишем текст, например: Горное озеро. Сохраняем свое творение.

Что означают значки в панели Paint

Пробежимся по инструментам для ввода текста в Paint.

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

Цифрой 2 на рис. 3 отмечен крохотный треугольник с размерами шрифта. Щелкаем по нему и выбираем нужный размер шрифта.

Цифра 3 на рис. 3 позволяет включить «жирный» шрифт, то есть, он будет более «толстый». Один клик по инструменту «Ж» включает его, другой клик — выключает.

Если хотите надпись с наклоном (так называемый курсив), то кликните по инструменту «К» — цифра 4 на рис. 3.

Выбираем прозрачный фон или непрозрачный с помощью инструмента, обозначенного цифрой 5. На рис. 3 выбран прозрачный фон, через который «просвечивает» картинка. При непрозрачном фоне вырезается кусочек картинки и вместо нее на белом фоне появляется подпись к фото.

Цифры с 1-ой по 5-ую на рис. 3 можно при первом рассмотрении пропустить. А вот цвет текста (цифра 6 на рис. 3) не всегда можно пропустить, иначе можно черным написать по черному фото или белым по белому и будет ничего не видно.

Стрелка, обозначенная сверху цифрой 7 на рис. 3, — это стрелка-спасительница от неудачных попыток, ибо позволяет ОТМЕНИТЬ несколько своих последних действий (если что-то не понравилось, не получилось и т.п.). Рекомендую при необходимости пользоваться этой стрелкой.

В конце следует обязательно сохранить свои труды. Для этого кликаем по дискете (цифра 6 на рис. 3). Или щелкаем по маленькому треугольнику (ниже цифры 6 на рис. 3), после чего откроется меню Файл, в котором выбираем «Сохранить как» или «Сохранить». Для безымянного файла, у которого имя отсутствует, нет разницы между опциями «Сохранить как» и «Сохранить».

Как сохранить фото с подписью

Все, что написано и показано выше, имеет смысл, ТОЛЬКО если фото с подписью будет сохранено. Здесь 4-е важных шага, пропускать нельзя, все они важные:

1) На рис. 3 кликаем по маленькому треугольнику над цифрой 6 (это меню Файл). В появившемся окне кликаем по опции «Сохранить как…». Откроется окно «Сохранить как…». Первое, что надо сделать — выбрать место, где будет храниться фото. Это сделать просто. Проблема может быть в том, чтобы потом найти это место или хотя бы вспомнить имя фото, чтобы найти свое фото, например, с помощью Поиска.

Например, я решила сохранить на Рабочем столе (не самый хороший вариант, так можно быстро захламить Рабочий стол, но для учебных целей подойдет) — цифра 1 на рис. 4. Можно создать папку для хранения фото. Так как мы выбрали Рабочий стол, то и папка будет создана на Рабочем столе. Чтобы создать папку, жмем кнопку «Новая папка» — цифра 1а на рис. 4. И затем вводим имя новой папки.

Рис. 4. Выбираем место для сохранения файла. Выбираем тип (формат) файла. Вводим имя файла. Жмем кнопку «Сохранить»

2) Выбираем Тип файла. Для этого кликаем по маленькому треугольнику (цифра 2 на рис. 4) и выбираем .jpeg. Хотя можно выбрать и другой тип файла, но это более экономный вариант в смысле размера файла.

3) Вводим имя файла, можно русскими или английскими буквами (3 на рис. 4).

4) Жмем кнопку «Сохранить» (цифра 4 на рисунке 4).

Будет полезно после этого закрыть редактор Paint и попытаться найти на своем ПК свое фото. Если найти не удастся, то можно открыть Paint и там в меню Файл (цифра 1 на рис. 2) кликнуть по имени своего файла в колонке с заголовком «Последние изображения».

Кстати, в меню Файл можно нажать на «Сохранить как» и попробовать свой файл сохранить заново так, чтобы его можно было при необходимости найти на своем ПК.

Подпись под фото в Windows XP с видео

Найти его просто: Пуск – Программы – Стандартные – Paint. Несколько строк об этом редакторе, который всегда у Вас под рукой, так как является стандартной программой, входящей в состав Windows.

Paint

Рис. 5. Графический редактор Paint (операционная система Windows XP)

Paint является наглядным примером редактора, работающего в одном окне. Однако это не мешает создать достаточно сложный рисунок. Две строчки значков в левом столбце – это ваша панель инструментов, как у художника кисти. Каждый инструмент имеет свои настройки.

В нижнем ряду располагается панель палитр – краски. Если вы заметили, то возле палитры цветов, в левом нижнем углу расположились два квадратика. При выборе цвета левой кнопкой мыши меняется левый квадрат. Аналогично правый квадрат меняется правой кнопкой мышки. Зачем? – спросите вы. Дело в том, что, рисуя левой кнопкой мыши, задействуется левый квадратик. Аналогично и с правым квадратиком, который работает «в паре» с правой кнопкой мыши.

Границы вашего рисунка можно увеличить или уменьшить, по вашему усмотрению. Внизу справа в строке состояния вы можете в реальном времени узнать размер рисунка.

Также “Paint” помнит имена последних четырех рисунков. Это позволяет быстро вызвать один из них, пользуясь меню Файл.

Более подробно с работой Paint Вы можете ознакомиться, если в верхней строке меню Paint кликните по опции Справка.

После небольшого обзора Paint вернемся к вопросу подписи под фото. Предлагаю вариант видео:

Текстовый вариант того, что показано в видео:

1) Через меню «Файл» — «Открыть» находите и открываете свое фото.

2) В меню «Рисунок» напротив опции «Непрозрачный фон» убираете галку, если она там есть. Таким образом, у Вас получится прозрачный фон в Paint.

3) С помощью инструмента текста (кнопка с буквой А в левой панели) растягиваете рамку текста, как прямоугольник, в нее вписываете текст, при необходимости –выделяете и форматируете текст (выбор шрифта, размер шрифта, цвет, жирный, курсив).

4) Сохраняете рисунок.

Как можно отправить фото

Если фото надо разместить в сети, для этого можно воспользоваться Облаком Майл ру или Яндекс.Диском. Полученную ссылку на свое фото можно использовать, например, для отправки фото по электронной почте.

Можно фото, если оно не очень большое, просто прикрепить к письму.

Подпись под фото, во-первых, нужна для идентификации фото, во-вторых, для указания авторства фото или его принадлежности какому-то сообществу, а также для наглядного выражения своих пожеланий, мыслей, эмоций и т.п.

Упражнение по компьютерной грамотности:

Откройте фото или картинку и поставьте подпись под фото (или картинкой), например, с помощью редактора Paint.

Дополнительные материалы:

1. Как создать шаблон подписи в Paint и поместить на фото

2. Программы Windows для применения фотофильтров

3. Как обрезать на картинке черные полосы по бокам в Paint и в Word

4. Ноутбук не поддерживает формат фотографии, что делать?

5. Как уменьшить вес фото

Получайте новые статьи по компьютерной грамотности на ваш почтовый ящик:

Необходимо подтвердить подписку в своей почте. Спасибо!

Источник

Самый примитивный вариант

Соединение изображения и подписи в блок

Использование тега figure

Верстка. Быстрый старт

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

HTML изображение справа – текст слева

Как сделать надпись под картинкой

Автоматическая нумерация картинок

Изображение с подписью в рамке

HTML подпись под картинкой, появляющаяся после наведения курсора мышки

Несколько фотографий и одно описание

Подготовка

Способ первый: картинка как фон div

Способ второй: наложение двух тегов друг на друга

Самый примитивный вариант

Соединение изображения и подписи в блок

Использование тега figure

Задача

Решение

Код html:

Код css:

Показываем описание при наведении на картинку

Word

Все остальные Office приложения

См. также

Нужна дополнительная помощь?

Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓

Последние новости категории:

Похожие статьи

Популярные статьи:

Добавить комментарий

Как сделать обтекание картинки текстом в Microsoft Word

как поставить текст рядом с картинкой

Сообщение о нарушении

Сообщение о нарушении

Как сделать текст вокруг картинки в Word

Как сделать в word картинку по левому краю, а текст справа

Заключение

Подпись на фото в Windows 10: видео

Как вставить подпись на фото в Windows 7

Что означают значки в панели Paint

Как сохранить фото с подписью

Подпись под фото в Windows XP с видео

Как можно отправить фото

Получайте новые статьи по компьютерной грамотности на ваш почтовый ящик: