Почему не удается задать поверх картинки полупрозрачный черный фон?
snippet
Привет! Мне нужно поверх фоновой картинки в самом низу сайта карточкам задать полупрозрачный черный фон. Ранее в блоке cover мне удалось это сделать, но сейчас делаю вроде то же самое, но почему-то все равно фон для каждого блока не накладывается сверху на фоновые картинки. Добавил в каждую карточку overlay и задал ему z-index: 0, position: absolute и background-color. Подскажите, пожалуйста, что делаю не так
Тут как должно быть:
А у меня так:
Дополнительно:
https://developer.mozilla.org/en-US/docs/Web/CSS/b...
не?
накладывать на .card__text, вероятно
Все получилось. Оказывается нужно было задать position: relative для overlay
- но теперь текста не видно у карточек)
- Рамазан, потому что у текста, как и у прочих элементов, по умолчанию position: static, а любое прочее значение свойства position создает новый контекст наложения, то бишь ваш overlay по оси Z теперь находится выше, чем текст, поэтому он его и перекрывает. Советую читать доки
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Проблема, с которой вы сталкиваетесь, связана с тем, что для задания полупрозрачного черного фона поверх изображения необходимо использовать правильный подход. Возможно, у вас есть проблемы с наложением элементов или неправильным использованием свойств CSS.
Для того чтобы задать полупрозрачный черный фон поверх изображения, вам следует использовать следующий подход:
1. Создайте контейнер, в котором будет находиться изображение и элемент с черным фоном:
```html
```
2. Примените стили к вашему контейнеру и элементу с черным фоном:
```css
.container {
position: relative;
}
.overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5); /* черный цвет с прозрачностью 50% */
}
```
3. Обратите внимание на использование свойства `background-color` с функцией `rgba()`. В данном случае, последнее значение (0.5) определяет прозрачность черного цвета. Чем меньше это значение (от 0 до 1), тем более прозрачным будет фон.
Таким образом, следуя этим шагам и правильно применяя CSS стили, вы сможете задать полупрозрачный черный фон поверх изображения на вашем веб-сайте. Надеюсь, это поможет вам решить вашу проблему!