Добавить темное наложение на фоновое изображение

Question

Я просмотрел несколько сообщений SO об этом: я хочу затемнить текущее фоновое изображение, добавив наложение.

#header1 { 
 
    background: url("http://lorempixel.com/image_output/cats-q-c-640-480-10.jpg"); 
 
    background-position:center center; 
 
    position: relative; 
 
    background-size: cover; 
 
    padding-bottom:5em; 
 
} 
 
.overlay { 
 
    background-color: rgba(0, 0, 0, 0.7); 
 
    top: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    position: relative; 
 
    z-index: 1; 
 
}

<div class="header"> 
 
    <div class="overlay"> 
 
    <div class="jumbotron" id="header1"> 
 
     <h1>Hello</h1> 
 
    </div> 
 
    </div> 
 
</div>

Может быть, я не понимание того, как использовать Z-индекс, или, может быть, я что-то пропустил. Темный фон, используемый для тонирования, не появляется. Любые указатели?

Answer 1

#header1 { 
 
    background: url("https://www.random.org/analysis/randbitmap-rdo.png");/*Random image I grabbed*/ 
 
    
 
    
 
    background-size: cover; 
 
    
 
    
 
} 
 

 
h1 { 
 
    color: white; 
 
    background-color: rgba(0, 0, 0, 0.7); 
 
    padding-top: 10px; 
 
    padding-bottom: 100px; 
 
    padding-left: 20px; 
 
    padding-right: 20px; 
 
}

<div class="header"> 
 
    <div class="overlay"> 
 
     <div class="jumbotron" id="header1"> 
 
      <h1>Hello</h1> 
 
     </div> 
 
    </div> 
 
</div>

Как предназначил h1 действует как дополнительный визуальный слой и его обивка охватывает # HEADER1.

Второе решение должно заключаться в том, чтобы добавить исходное фоновое изображение в .header и иметь стили из h1, указанные в #overlay, и с небольшим количеством настроек, которые также должны сделать трюк.

И еще одно возможное решение (аналогично второму) можно добавить фоновое изображение для наложения и имеют стили h1 из примера я дал # header1 или .jumbotron

В дополнение к первому решение, вы должны иметь возможность добавить дополнительный слой, добавив background-color: to overlay. Я не уверен, как это повлияет на фон точно, но из того, что я предполагаю, он должен просто добавить дополнительный слой цвета.

Вот персональный пример, где я использовал эту технику.

Example

Answer 2

Свойство Z-индекс указывает порядок стека элемента. Элемент с большим порядком стека всегда находится перед элементом с более низким порядком стека. для вашего ответа, вы можете посетить css-tricks

Answer 3

Я думаю, вы хотели бы, чтобы полностью скрыть фоновое изображение, то вам нужно установить значение альфа 1 в RGBA (0,0,0,1)

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

ниже ссылку объяснить концепцию накладывания с очень хорошими примерами

http://tympanus.net/codrops/2013/11/07/css-overlay-techniques/

Answer 4

Использование Linear gradient

затемнить фон относятся к этому codepen и это link

<div class="bg-img"></div> 

.bg-img { 
    width: 100%; 
    height: 100%; 
    background: url('http://alexcarpenter.me/img/banner.jpg') center center no-repeat; 
    background-size: cover; 

    &:before { 
    content: ''; 
     position: absolute; 
     top: 0; 
     right: 0; 
     bottom: 0; 
     left: 0; 
     background-image: linear-gradient(to bottom right,#002f4b,#dc4225); 
     opacity: .6; 
    } 
}