Как сделать такую полоску над картинкой?

Чтобы создать полоску над картинкой, вам понадобится использовать HTML и CSS. Есть несколько способов достичь желаемого эффекта, и я расскажу вам о двух наиболее распространенных.

1. Способ №1: Использование псевдоэлемента ::before.

HTML:

<div class="image-wrapper">
  <img src="path/to/your/image.jpg" alt="Your Image">
</div>

CSS:

.image-wrapper {
  position: relative;
}

.image-wrapper::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 20px; /* высота полоски */
  background-color: #000; /* цвет полоски */
  opacity: 0.5; /* прозрачность полоски */
}

В этом случае мы создаем родительский контейнер .image-wrapper, который нужен для позиционирования полоски относительно картинки. Псевдоэлемент ::before используется для создания полоски. Мы задаем ему абсолютное позиционирование и позиционируем его в левом верхнем углу родительского контейнера. Затем мы указываем ширину 100% (чтобы полоска занимала всю ширину родительского контейнера) и задаем нужную высоту, цвет и прозрачность полоски.

2. Способ №2: Использование фонового изображения.

HTML:

<div class="image-wrapper"></div>

CSS:

.image-wrapper {
  position: relative;
  background-image: url('path/to/your/image.jpg');
  background-repeat: no-repeat;
  background-size: cover;
}

.image-wrapper::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 20px; /* высота полоски */
  background-color: #000; /* цвет полоски */
  opacity: 0.5; /* прозрачность полоски */
}

В этом случае мы используем только родительский контейнер .image-wrapper без дочерних элементов. Мы задаем фоновое изображение, которое будет отображаться внутри контейнера (убедитесь, что указываете правильный путь к изображению). Затем мы используем псевдоэлемент ::before, чтобы создать полоску так же, как в первом способе.

Оба способа достигают желаемого результата, и вы можете выбрать тот, который больше соответствует вашим потребностям. Не забудьте заменить path/to/your/image.jpg на путь к вашей собственной картинке и настроить размер и цвет полоски под свои предпочтения.