想要在背景图像上创建透明的颜色叠加，但希望覆盖所有内容

Question

基本上，我想要一个背景，然后是一个透明的叠加层，然后我的所有内容都被带到最前面。到目前为止我已经

了

#overlay{
    position:absolute;
    left:0;
    right:0;
    top:0;
    bottom:0;
    background-color:grey;
    opacity:0.5;
    }

我的html文档中包含了所有内容<div id="overlay">。提前致谢。

Answer 1

这是一种简单的方法：

body {
  width: 100%;
  height: 100%;
}
.content {
  position: relative;
  width: 500px;
  height: 500px;
  background-image: url('http://static.vecteezy.com/system/resources/previews/000/094/491/original/polygonal-texture-background-vector.jpg');
  background-size: cover;
}
.overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
}
.inner-content {
  width: 250px;
  height: 250px;
  padding: 20px;
  background-color: #FFFFFF;
  margin: 50px 0 0 105px;
  color: #000000;
}

<div class="content">
  <div class="overlay">
    <div class="inner-content">Your inner content</div>
  </div>
</div>

这个示例有很多不必要的代码，只是为了让样本看起来不错，但你应该明白这一点。

Answer 2

我会使用thepios答案，但使用:before来摆脱不必要的叠加div：

body {
  width: 100%;
  height: 100%;
}
.content {
  position: relative;
  width: 500px;
  height: 500px;
  background-image: url('http://static.vecteezy.com/system/resources/previews/000/094/491/original/polygonal-texture-background-vector.jpg');
  background-size: cover;
  padding: 50px;
}
.content:before{
  content: ' ';
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
}
.inner-content {
  width: 250px;
  height: 250px;
  padding: 20px;
  background-color: #FFFFFF;
  color: #000000;
  position: absolute;
}

<div class="content">
  <div class="inner-content">Your inner content</div>
</div>