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

Lion Digital Agency

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

теги:

Категории

Рубрики

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

от 119000 

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

от 189000 

Разработка сайтов под ключ. Работаем с такими системами, как Worpress, 1C-Bitrix, Tilda. Закажите разработку в Lion Digital и получите по настоящему продающий сайт.

от 32900 

Как поместить текст на картинку CSS

Существует несколько способов поместить текст на картинку с помощью CSS:

1 С помощью свойства background-image и background-position:

<div class="image-with-text"></div>

.image-with-text {
  background-image: url("path/to/image.jpg");
  background-position: center;
  background-size: cover;
  height: 300px;
  position: relative;
}

.image-with-text:before {
  content: "Текст на картинке";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  font-size: 24px;
}
  1. С помощью позиционирования элементов:
<div class="image-with-text">
  <img src="path/to/image.jpg" alt="Картинка">
  <div class="text-overlay">Текст на картинке</div>
</div>

.image-with-text {
  position: relative;
}

.image-with-text img {
  display: block;
  width: 100%;
  height: auto;
}

.text-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  font-size: 24px;
}
  1. С помощью свойства clip-path:
<div class="image-with-text">
  <img src="path/to/image.jpg" alt="Картинка">
 div class="text-overlay">Текст на картинке</div>
</div>

.image-with-text {
  position: relative;
}

.image-with-text img {
  display: block;
  width: 100%;
  height: auto;
  clip-path: polygon(0 0, 100% 0, 100% 80%, 0 100%);
}

.text-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 20px;
  color: #fff;
  font-size: 24px;
  background-color: rgba(0, 0, 0, 0.5);
}

Выберите подходящий для вас способ и примените его к своему проекту.

Поделиться:

Комментарии

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

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

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

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

Меню

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

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