想要在背景圖像上創建透明的顏色疊加層，但希望疊加層前面的所有內容

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>