Как сделать фоновый цвет появляться поверх фонового изображения

Question

У меня есть background-image из <section> на месте и хотел бы, чтобы у него был установлен background-color, чтобы придать изображению тусклый эффект. Невозможно использовать opacity, так как эффект будет расширен для дочерних элементов, которые у меня есть (заголовок в этом случае). Я использовал rgba(0,0,0,.5) в своем разделе, но выглядит как фоновый цвет, который может появиться только за фоновым изображением.

Любые идеи о том, как это сделать, охватывают весь раздел, все еще находясь за элементами детей?

body { 
 
    width: 100%; 
 
} 
 
/*Header*/ 
 

 
#header { 
 
    width: 100%; 
 
    background: url(../_img/new_background.jpg) no-repeat center center rgba(0, 0, 0, .5); 
 
    background-size: cover; 
 
    display: -webkit-flex; 
 
    /*For Safari 7 and 8*/ 
 
    display: flex; 
 
    -webkit-flex-direction: column; 
 
    flex-direction: column; 
 
    -webkit-justify-content: center; 
 
    justify-content: center; 
 
} 
 
header { 
 
    display: -webkit-flex; 
 
    display: flex; 
 
    -webkit-flex-direction: column; 
 
    flex-direction: column; 
 
    -webkit-justify-content: center; 
 
    justify-content: space-between; 
 
} 
 
header h1, 
 
header p:last-of-type { 
 
    font-family: "Proxima Nova Extrabold"; 
 
    color: white; 
 
    text-transform: uppercase; 
 
    font-size: 3.75em; 
 
    text-align: center; 
 
} 
 
h1 + p { 
 
    font-family: "Palatino"; 
 
    color: white; 
 
    font-size: 2.5em; 
 
    text-align: center; 
 
}

<!-- Header --> 
 
<section id="header"> 
 
    <header> 
 
    <h1>Example</h1> 
 
    <p>Example</p> 
 
    <p>Example</p> 
 
    </header> 
 
</section>

Answer 1

:before использование или :after

body { 
 
    width: 100%; 
 
} 
 
/*Header*/ 
 
#header { 
 
    width: 100%; 
 
    background: url(http://zarech63.ru/sites/default/files/imagecache/product_full/product/motor-lodochnyy-suzuki-dt15as_623487.jpg) no-repeat center center; 
 
    background-size: cover; 
 
    display: -webkit-flex; 
 
    /*For Safari 7 and 8*/ 
 
    display: flex; 
 
    -webkit-flex-direction: column; 
 
    flex-direction: column; 
 
    -webkit-justify-content: center; 
 
    justify-content: center; 
 
    position: relative; 
 
} 
 
#header:before{ 
 
    content: ''; 
 
    width: 100%; 
 
    height: 100%; 
 
    background: rgba(0,0,0,0.5); 
 
    position: absolute; top: 0; left: 0; 
 
} 
 

 

 
header { 
 
    display: -webkit-flex; 
 
    display: flex; 
 
    -webkit-flex-direction: column; 
 
    flex-direction: column; 
 
    -webkit-justify-content: center; 
 
    justify-content: space-between; 
 
    position: relative; 
 
} 
 
header h1, header p:last-of-type { 
 
    font-family:"Proxima Nova Extrabold"; 
 
    color: white; 
 
    text-transform: uppercase; 
 
    font-size: 3.75em; 
 
    text-align: center; 
 
} 
 
h1 + p { 
 
    font-family:"Palatino"; 
 
    color: white; 
 
    font-size: 2.5em; 
 
    text-align: center; 
 
}

<!-- Header --> 
 
    <section id="header"> 
 
     <header> 
 
      \t <h1>Example</h1> 
 

 
      <p>Example</p> 
 
      <p>Example</p> 
 
     </header> 
 
    </section>

Answer 2

Вы можете иметь несколько фоновых изображений на элементе. Используйте изображение CSS3 Linear Gradient как непрозрачное наложение и поместите его перед изображением JPEG.

#test { 
 
    height: 300px; 
 
    background: 
 
    /* overlay */ 
 
    linear-gradient(to right, rgba(0, 0, 0, .5) 0, rgba(0, 0, 0, .5) 100%), 
 
    /* jpg img*/ 
 
    url("http://lorempixel.com/400/300/nature/5/"); 
 
}

<div id="test"></div>