В этом посте рассказывается о написании подписи под изображением.
Как написать подпись под изображением?
Чтобы написать подпись под изображением, мы предоставим различные методы, указанные ниже:
- Способ 1: Как добавить подпись к изображению с помощью HTML»
Элемент? - Способ 2: Как добавить подпись к изображению с помощью « <дел> Элемент?
Способ 1: Как добавить подпись к изображению с помощью HTML-элемента «»?
Чтобы добавить подпись к изображению, выполните следующие действия:
- Сначала добавьте « <рисунок> », который используется для представления автономного контента, возможно, с необязательным заголовком.
- Далее вставьте « <изображение> ” тег внутри абзаца “ <р> ' ярлык. Добавьте изображение, используя кнопку « источник атрибут. “ все ” показывает добавленный контент, если изображение не отобразилось по какой-либо причине.
- Установите ширину изображения как « 200 пикселей ».
- Затем «
Тег используется для добавления подписи к изображению. Кроме того, добавьте подпись между тегами « »:
<р > <источник изображения знак равно 'TSL.png' все знак равно «Создатели контента TSL» ширина знак равно '200' >
>
Вы можете видеть, что изображение с указанной подписью было отображено:
Теперь перейдите ко второму способу добавления подписи с помощью CSS.
Способ 2: Как добавить подпись к изображению с помощью элемента «»?
Чтобы добавить подпись к изображению с помощью кнопки « <дел> », попробуйте данные инструкции:
- Создать ' <дел> » и добавьте атрибут класса с именем « образ-держатель ».
- Добавьте тег заголовка « ” для вставки заголовка и стиля заголовка по вашему выбору.
- Добавьте еще один элемент «» и вставьте « <изображение> » вместе с « источник », « все ' и ' ширина ” между контейнером div.
- Добавьте третий «» с именем класса « img-заголовок ». Затем укажите заголовок между тегами «». Более того, «
” используется для добавления одного разрыва строки:
<класс деления знак равно 'имидж-держатель' >
знак равно 'цвет:rgb(95, 31, 245)' > HTML-изображение >
<дел >
<источник изображения знак равно 'TSL.png' все знак равно «Создатели контента TSL» ширина знак равно '200' >
<класс деления знак равно 'img-заголовок' > > Создатели контента TSL >
>
>
Можно заметить, что подпись к изображению была успешно добавлена:
Теперь давайте перейдем к разделу CSS для применения свойств.
Стиль «.image-holder» в CSS
Сначала войдите в « <дел> » элемент, имеющий класс « .изображение-держатель ». Затем примените следующие свойства CSS:
.изображение-держатель {
должность : родственник ;
высота : 100 пикселей ;
ширина : 200 пикселей ;
прибыль : авто ;
}
Детали упомянутых выше свойств описаны ниже:
- “ должность » устанавливается как « родственник », чтобы указать исходное положение элемента, которое остается в потоке документа, как и статическое значение.
- Затем, ' высота ” используется для определения высоты элемента.
- “ ширина ” задает размер элемента по ширине.
- “ прибыль » устанавливается как « авто », чтобы автоматически установить пространство вокруг элемента.
Стиль подписи в CSS
На этом шаге мы получим доступ к двум классам с именем « образ-держатель ' и ' img-заголовок ” и примените следующие свойства CSS:
.изображение-держатель .img-заголовок {
должность : абсолютный ;
выравнивание текста : центр ;
вес шрифта : жирный ;
ширина : 200 пикселей ;
высота : 50 пикселей ;
левый : 0px ;
цвет : #f80909 ;
задний план : RGB ( 140 , 166 , 253 ) ;
}
Описание вышеупомянутых свойств выглядит следующим образом:
- “ выравнивание текста ” установлено как “ центр ” для выравнивания положения текста по центру.
- Следующий, ' вес шрифта » выделяется как « жирный », чтобы установить шрифт подписи к изображению.
- Затем « цвет ” используется для установки цвета доступного элемента.
- “ задний план Свойство задает цвет фона элемента.
- Другие объекты, в том числе « должность », « высота ', и ' ширина ” также используются для применения соответствующих функций.
Вывод
Мы обсудили способы написания подписи под изображением.
Заключение
Чтобы написать подпись под изображением, пользователи могут либо использовать « », сначала добавьте « <изображение> », чтобы вставить изображение внутрь « <рисунок> », затем используйте элемент «» и добавьте заголовок между его тегами. Во втором подходе пользователи могут просто использовать « <дел> » и примените различные свойства CSS, чтобы украсить заголовок. В этом посте продемонстрированы способы написания подписи под изображением.
Чтобы добавить подпись к изображению с помощью кнопки « <дел> », попробуйте данные инструкции:
- Создать ' <дел> » и добавьте атрибут класса с именем « образ-держатель ».
- Добавьте тег заголовка « ” для вставки заголовка и стиля заголовка по вашему выбору.
- Добавьте еще один элемент «» и вставьте « <изображение> » вместе с « источник », « все ' и ' ширина ” между контейнером div.
- Добавьте третий «
» с именем класса « img-заголовок ». Затем укажите заголовок между тегами «». Более того, «
” используется для добавления одного разрыва строки: <класс деления знак равно 'имидж-держатель' >
знак равно 'цвет:rgb(95, 31, 245)' > HTML-изображение >
<дел >
<источник изображения знак равно 'TSL.png' все знак равно «Создатели контента TSL» ширина знак равно '200' >
<класс деления знак равно 'img-заголовок' >
>
>Можно заметить, что подпись к изображению была успешно добавлена:
Теперь давайте перейдем к разделу CSS для применения свойств.
Стиль «.image-holder» в CSS
Сначала войдите в « <дел> » элемент, имеющий класс « .изображение-держатель ». Затем примените следующие свойства CSS:
.изображение-держатель {
должность : родственник ;
высота : 100 пикселей ;
ширина : 200 пикселей ;
прибыль : авто ;
}Детали упомянутых выше свойств описаны ниже:
- “ должность » устанавливается как « родственник », чтобы указать исходное положение элемента, которое остается в потоке документа, как и статическое значение.
- Затем, ' высота ” используется для определения высоты элемента.
- “ ширина ” задает размер элемента по ширине.
- “ прибыль » устанавливается как « авто », чтобы автоматически установить пространство вокруг элемента.
Стиль подписи в CSS
На этом шаге мы получим доступ к двум классам с именем « образ-держатель ' и ' img-заголовок ” и примените следующие свойства CSS:
.изображение-держатель .img-заголовок {
должность : абсолютный ;
выравнивание текста : центр ;
вес шрифта : жирный ;
ширина : 200 пикселей ;
высота : 50 пикселей ;
левый : 0px ;
цвет : #f80909 ;
задний план : RGB ( 140 , 166 , 253 ) ;
}Описание вышеупомянутых свойств выглядит следующим образом:
- “ выравнивание текста ” установлено как “ центр ” для выравнивания положения текста по центру.
- Следующий, ' вес шрифта » выделяется как « жирный », чтобы установить шрифт подписи к изображению.
- Затем « цвет ” используется для установки цвета доступного элемента.
- “ задний план Свойство задает цвет фона элемента.
- Другие объекты, в том числе « должность », « высота ', и ' ширина ” также используются для применения соответствующих функций.
Вывод
Мы обсудили способы написания подписи под изображением.
Заключение
Чтобы написать подпись под изображением, пользователи могут либо использовать «
” элемент или простой “ <дел> контейнер. Чтобы использовать « », сначала добавьте « <изображение> », чтобы вставить изображение внутрь « <рисунок> », затем используйте элемент « » и добавьте заголовок между его тегами. Во втором подходе пользователи могут просто использовать « <дел> » и примените различные свойства CSS, чтобы украсить заголовок. В этом посте продемонстрированы способы написания подписи под изображением. - Добавьте третий «