Как поверх картинки сделать надпись
Текст тоже должен находиться внутри какого-нибудь тега. Я поместил надпись в тег <span>.
Возможно, у Вас уже есть конструкция с тегом <figure>. Например, такая:
Тогда никакие дополнительные теги Вам не нужны, будете работать с Вашим кодом.
Итак, чтобы текст переместился над изображение, нужно воспользоваться CSS. Для тега-обертки нужно задать какое-то позиционирование, а для надписи обязательно абсолютное позиционирование (position: absolute).
Если Вы не знаете CSS, то код можно писать прямо в HTML. Вот пример:
Ну, а далее, нужно просто переместить текст в необходимое место над картинкой.
Для конструкции с тегом <figure> нужно сделать аналогичные действия.
Добавить комментарий Отменить ответ
Privacy Overview
Necessary cookies are absolutely essential for the website to function properly. These cookies ensure basic functionalities and security features of the website, anonymously.
| Cookie | Duration | Description |
|---|---|---|
| cookielawinfo-checkbox-analytics | 11 months | This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category «Analytics». |
| cookielawinfo-checkbox-functional | 11 months | The cookie is set by GDPR cookie consent to record the user consent for the cookies in the category «Functional». |
| cookielawinfo-checkbox-necessary | 11 months | This cookie is set by GDPR Cookie Consent plugin. The cookies is used to store the user consent for the cookies in the category «Necessary». |
| cookielawinfo-checkbox-others | 11 months | This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category «Other. |
| cookielawinfo-checkbox-performance | 11 months | This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category «Performance». |
| viewed_cookie_policy | 11 months | The cookie is set by the GDPR Cookie Consent plugin and is used to store whether or not user has consented to the use of cookies. It does not store any personal data. |
Functional cookies help to perform certain functionalities like sharing the content of the website on social media platforms, collect feedbacks, and other third-party features.
Performance cookies are used to understand and analyze the key performance indexes of the website which helps in delivering a better user experience for the visitors.
Analytical cookies are used to understand how visitors interact with the website. These cookies help provide information on metrics the number of visitors, bounce rate, traffic source, etc.
Advertisement cookies are used to provide visitors with relevant ads and marketing campaigns. These cookies track visitors across websites and collect information to provide customized ads.
Other uncategorized cookies are those that are being analyzed and have not been classified into a category as yet.
Обработка текста поверх изображений в CSS
От автора: вы можете встретить компонент пользовательского интерфейса, у которого есть текст над изображением. В некоторых случаях текст будет трудно прочитать в зависимости от используемого изображения. Есть несколько различных решений, таких как добавление наложения градиента или тонированного фонового изображения, тени текста и других.
В этой статье я исследую различные подходы и решения проблемы обработки текста, а также то, как передать пользовательский интерфейс разработчику, и убедиться, что он реализован в соответствии с макетом дизайна, поскольку некоторые детали могут быть легко упущены в CSS.
Введение
Каждое решение должно решать проблему. Давайте рассмотрим проблему в нашем случае. При разработке компонента, который имеет текст над изображением, мы должны позаботиться о том, чтобы текст был легко читаемым.
Обратите внимание, что версия без наложения градиента плохо читается. Это не хорошо для пользователя. Чтобы решить эту проблему, нам нужно добавить слой под текстом, чтобы его было легко читать. Добавление этого уровня может быть сложной задачей, и я видел многих, кто внедряет такое решение, без учета доступности.
Профессия Frontend-разработчик PRO
Готовим Frontend-разработчиков с нуля
На курсе вы научитесь создавать интерфейсы веб-сервисов с помощью языков программирования и дополнительных технологий. Сможете разрабатывать планировщики задач, мессенджеры, интернет-магазины…
Обзор возможных решений
Есть разные решения для облегчения чтения текста. Давайте рассмотрим их.
Как видите, есть разные решения проблемы. Те, которые требуют большего внимания, — это градиентные решения. Почему? Потому что можно добавить слой градиента, и текст станет недоступен.
Решения
Наложение градиента
Вообще говоря, наложение градиента — это наиболее распространенное решение, позволяющее сделать текст на изображении более чётким. Учитывая это, я остановлюсь на нем немного подробнее. При реализации наложения градиента у нас есть два варианта:
Использовать отдельный элемент для градиента (псевдо-элемент или пустой div)
Применить градиент как фоновое изображение.
У каждого из вышеперечисленных есть свои плюсы и минусы, давайте рассмотрим их. Элемент содержимого позиционируется абсолютно, и у него есть градиент в качестве фонового изображения. Это означает, что размер градиента равен высоте элемента.