Добавление прозрачного оверлея в div

Я пытаюсь добавить оверлей поверх div, в котором хранится изображение. Я видел подходы, которые добавляют наложение к фоновым изображениям, но не могу понять, почему это не работает для div?

Подход:

.featured-image {
  height: 338px;
  position: relative;
  overflow: hidden;
}

.overlay {
  background-color: rgba(0, 0, 0, 0.6);
  width: 100%;
  height: 100%;
  z-index: 2;
}

<div class = "featured-image">
  <div class = "overlay">
    <img src = "https://img.freepik.com/free-vector/abstract-low-poly-design-background_1048-8196.jpg?size=338c&ext=jpg">
  </div>
</div>

html css

17.12.2018 12:47

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

5 271

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

<style>
.featured-image {
  height: 338px;
  position: relative;
}

.overlay {
  position:absolute;
  top:0px;
  left:0px;
  background-color: rgba(0, 0, 0, 0.6);
  width: 100%;
  height: 100%;
  z-index: 2;
}
</style>
<div class = "featured-image">
  <div class = "overlay"></div>
    <img src = "https://img.freepik.com/free-vector/abstract-low-poly-design-background_1048-8196.jpg?size=338c&ext=jpg">
  
</div>

17.12.2018 12:50

Другие вопросы по теме

Уровень спецификации CSS

Фон Google Chart

Вертикальное выравнивание абсолютного позиционированного DIV с левым значением внутри элемента TD в IE11

Цвет фона CSS в div высотой всего 20 пикселей

Wordpress - Настройка плагина Watson Assistant

JQuery flip-контейнеры без класса

Как сделать эту левую боковую панель видимой на мобильных устройствах?

CSS показывает тень, если она больше 130 пикселей от верхней части страницы

Как вставить автовоспроизведение в слайдер изображения?

Frontend-framework переопределяет весь css

Добавление прозрачного оверлея в div

Ответы 1

Другие вопросы по теме

Похожие вопросы