如何使背景颜色出现在背景图像之上

Question

我得到了 background-image 的 <section> 并希望通过它设置 background-color 以使图像具有暗淡的效果。无法使用 opacity，因为效果将扩展到我拥有的 children 个元素（在本例中为 header）。我在我的部分使用了 rgba(0,0,0,.5)，但看起来 background-color 只能出现在 background-image 后面。

关于如何使其覆盖整个部分同时仍然落后于 children 元素有什么想法吗？

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>
             <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>

如何使背景颜色出现在背景图像之上

How to make a background color appear on top of a background image

html

css

background-image