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

Lion Digital Agency

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

теги:

Категории

Рубрики

Написание постов, ведение соц сетей Ваших компаний. Формирование имиджа и контента.

от 22900 

Данный набор подходит всем, кто хочет уверенно продавать товары и услуги в интернете. Стоимость набора варьируется в зависимости от конкуренции рынка. Разработка сайта компании/каталог/магазин + Яндекс Директ / ВК реклама + СЕО продвижение.

от 119000 

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

от 29500 

Как сделать наложение в css

Наложение элементов (overlay) в CSS можно реализовать с помощью свойства position и z-index. Вот пример кода для создания наложения с картинкой на фоновом изображении:

HTML:

<div class="overlay">
  <h1>Заголовок</h1>
  <p>Описание</p>
</div>

CSS:

.overlay {
  position: relative;
  width: 100%;
  height: 100%;
}

.overlay:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("фоновое-изображение.jpg");
  background-size: cover;
  filter: brightness(50%);
  z-index: 1;
}

.overlay h1, .overlay p {
  position: relative;
  z-index: 2;
  color: #fff;
}

.overlay p {
  font-size: 20px;
}

Здесь мы используем псевдоэлемент ::before и задаем ему фоновое изображение с помощью свойства background-image. Также мы устанавливаем свойство filter для настройки яркости изображения на 50%, чтобы сделать его темнее и лучше подходящим для наложения.

Затем мы задаем высоту и ширину для наложения, устанавливаем родительский элемент как position: relative, а затем устанавливаем позицию для псевдоэлемента с position: absolute.

С помощью свойства z-index мы устанавливаем порядок наложения элементов. Значение z-index для псевдоэлемента ::before установлено на 1, что позволяет ему находиться «под» заголовком и текстом.

Чтобы добавить содержимое наложения, мы устанавливаем z-index для элементов заголовка и текста с помощью свойства z-index.

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

Поделиться:

Комментарии

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

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

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

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

Меню

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

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