不透明圖像的半透明背景

Question

我有一個用戶上傳的圖像（幾乎總是一個JPEG），我想用它作爲背景。爲了減少分散注意力，保持內容清晰易讀，我試圖減少其不透明度。從本質上講，我喜歡像純色rgba這樣的效果。

我試着放置在後臺一個div負下邊距頂拉內容在它：

<div style="height: 200px; bottom: -200px; background: url(example.jpg) no-repeat; opacity: 0.5;"></div> 
<!-- page content --> 

然而，似乎hackish的，只有部分工作。這正是我想要的，直到opacity被扔在那裏;它把div放在最前面。 （如何opacity影響分層！？）

我認爲position: absolute爲背景DIV和內容，所以我可以用z-index玩，但在突破模板，這是所有英寸

如何獲得這個圖像是一個半透明的背景？

Answer 1

而不是必須拉這個圖像的頂部內容，爲什麼不只是在你的內容添加一個包裝，並把圖像作爲該包裝的背景？然後，您可以爲您的內容添加半透明背景，使其更清晰（同時仍能看到其下方的圖像）。嘗試：

<div class="wrapper" style="background-image: url(example.jpg);" > 
    <div class="content"> 
     ... 
    </div> 
</div> 

CSS：

.wrapper { background: none 0 0 no-repeat; } 
.content { background: url(transparency.png); } 

希望這不是太混亂！