在圖像和網頁內容之間做一個透明的白色覆蓋

Question

我想爲OP.gif做一個背景，它具有顏色透明的白色，覆蓋所有的網頁，並使下面的輸入[類型='文字']在該覆蓋範圍內（透明的白色）。因此最終用戶不能點擊輸入。

<input type="text" /> 
<span style="position:fixed;left:40%;top:40%;"><img src="OP.gif" />Welcome</span> 

我該如何處理這個問題？

Answer 1

HTML：

<input type="text" /> 
<div class="white-win"> 
    <span class="welcome"><img src="OP.gif" />Welcome</span> 
</div> 

CSS：

.white-win { 
position: fixed; 
top: 0; 
bottom: 0; 
left: 0; 
right: 0; 
background: rgba(255,255,255,0.5); 
z-index: 99; 
} 
.welcome {position:absolute;left:40%;top:40%;} 

Answer 2

可以使用絕對定位的覆蓋和rgba背景

像這樣FIDDLE做到這一點？圖像應該比覆蓋層大z-index。