CSS Overlay делает текст темным

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

Вот фрагмент, который показывает, что происходит:

.header {
    background: url("http://mediad.publicbroadcasting.net/p/wamc/files/201609/codingsnippet.jpg") no-repeat center center fixed; 
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-repeat: no-repeat;
    color: white;
    width: 100%;
    height: 100%;
}

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.5);
    opacity: 0.5;
}

.heading {
    display: inline-block;
    font-size: 3em;
}

.nav-item {
    font-size: 1.3em;
    float: right;
    list-style-type: none;
    padding: 0px 5px;
}

.nav-item > a {
    color: white;
    font-weight: bold;
    display: block;
}

a {
    color: black;
    text-decoration: none;
}

<div class = "header">
        <div class = "overlay"></div>
        <div class = "nav">
            <!-- <img src = "img/logo.png" alt = "logo" class = "logo"> -->
            <li class = "nav-item"><a href = "https://jordanbaron.github.io">Home</a></li>
            <li class = "nav-item"><a href = "#about" >About</a></li>
            <li class = "nav-item"><a href = "#portfolio" >Portfolio</a></li>
            <li class = "nav-item"><a href = "#contact">Contact</a></li>
        </div>
        <h1 class = "heading" id = "heading"></h1>
    </div>

Возможный дубликат Как добавить цветное наложение на фоновое изображение?

— 29.01.2019 02:39

html css

29.01.2019 02:26

Улучшение производительности загрузки с помощью 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 страниц, которые помогут...

1 248

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

Ответы 1

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

По умолчанию z-index для любого элемента — auto, что означает, что он получает свой z-index от своего родителя. В вашем коде только класс .overlay имеет z-index и он установлен на 1, что означает, что он будет помещен перед элементами с более низким z- index, например ваш элемент .nav.

Чтобы это исправить, нужно просто присвоить классу z-index адрес 1 выше, чем .nav. Помните, что только позиционированные элементы могут иметь z-index, поэтому вам следует сделать что-то вроде этого:

.nav {
  position: relative;
  z-index: 2;

Ваш фрагмент исправлен:

.header {
    background: url("http://mediad.publicbroadcasting.net/p/wamc/files/201609/codingsnippet.jpg") no-repeat center center fixed; 
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-repeat: no-repeat;
    color: white;
    width: 100%;
    height: 100%;
}

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.5);
    opacity: 0.5;
}

.heading {
    display: inline-block;
    font-size: 3em;
}

.nav-item {
    font-size: 1.3em;
    float: right;
    list-style-type: none;
    padding: 0px 5px;
}

.nav-item > a {
    color: white;
    font-weight: bold;
    display: block;
}

a {
    color: black;
    text-decoration: none;
}

.nav {
    position: relative;
    z-index: 2;
}

<div class = "header">
        <div class = "overlay"></div>
        <div class = "nav">
            <!-- <img src = "img/logo.png" alt = "logo" class = "logo"> -->
            <li class = "nav-item"><a href = "https://jordanbaron.github.io">Home</a></li>
            <li class = "nav-item"><a href = "#about" >About</a></li>
            <li class = "nav-item"><a href = "#portfolio" >Portfolio</a></li>
            <li class = "nav-item"><a href = "#contact">Contact</a></li>
        </div>
        <h1 class = "heading" id = "heading"></h1>
    </div>

Вы также можете рассмотреть другие, более чистые методы затемнения изображения, такие как свойство CSS filter.

Как я могу сделать это с помощью filter?

— 29.01.2019 02:44

@JordanBaron В основном это та же идея: вы просто поместите фоновое изображение в элемент .overlay и установите там фильтр (чтобы это не повлияло на содержимое .nav). Вот пример, я только что использовал ::after вместо другого div: codepen.io/anon/pen/VgjOpd

— 29.01.2019 02:55

29.01.2019 02:35