Доверьте продвижение нам

Lion Digital Agency

интернет-маркетинг

теги:

Категории

Рубрики
Продвижение на авито под ключ. Получите клиентов в первую неделю. Создадим до 50тыс похожих объявлений!
от 29500 
Написание постов, ведение соц сетей Ваших компаний. Формирование имиджа и контента.
от 22900 
Разработка сайтов под ключ. Работаем с такими системами, как Worpress, 1C-Bitrix, Tilda. Закажите разработку в Lion Digital и получите по настоящему продающий сайт.
от 32900 

Как сделать текст сверху в css

Текст сверху (или поверх) других элементов в CSS можно создать разными способами, в зависимости от того, какой именно эффект вам нужен.

Способ 1: свойство z-index

HTML:

<div class="container">
  <img src="image.jpg" alt="Изображение">
  <h2 class="overlay">Текст над изображением</h2>
</div>

CSS:

.container {
  position: relative;
}

.overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  background-color: rgba(255, 255, 255, 0.7);
  padding: 20px;
}

В данном примере мы создали блок div с классом container, в котором находится изображение и текст над ним. Затем мы задали блоку container свойство position: relative, чтобы дочерний элемент overlay мог относительно него находиться.

Для элемента h2 с классом overlay мы задали свойство position: absolute, чтобы он оказался выше изображения. Свойством top и left мы задали координаты элемента (в данном случае — находится он по центру блока), а свойством transform: translate(-50%, -50%) сместили его на половину ширины и высоты, чтобы он находился точно по центру. Свойством z-index мы задали элементу overlay значение 1, чтобы он оказался поверх изображения. Свойством background-color: rgba(255, 255, 255, 0.7) мы задали ему полупрозрачный белый фон, а свойством padding добавили отступы.

Способ 2: псевдоэлемент ::before

HTML:

<div class="container">
  <img src="image.jpg" alt="Изображение">
  <h2>Текст под изображением</h2>
</div>

CSS:

.container {
  position: relative;
}

h2 {
  position: relative;
  z-index: 1;
}

h2::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  background-color: rgba(255, 255, 255, 0.7);
}

В данном примере мы создали блок div с классом container, в котором находится изображение и текст под ним. Затем мы задали блоку container свойство position: relative, чтобы дочерний элемент h2 мог относительно него находиться.

Для элемента h2 мы задали свойство position: relative, чтобы он оказался поверх изображения. Затем мы создали псевдоэлемент ::before и задали его свойства content: », position: absolute, top: 0, left: 0, width: 100%, height: 100% и z-index: -1, чтобы он занял всю область элемента h2 и оказался под ним. Свойством background-color: rgba(255, 255, 255, 0.7) мы задали ему полупрозрачный белый фон.

Поделиться:

Комментарии

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Задать вопрос

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

Меню

Оставить заявку

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