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

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>