在图像和网页内容之间形成透明的白色覆盖

Question

我正在尝试为OP.gif制作一个背景，该背景具有覆盖所有网页的透明白色，并在该覆盖范围内（透明白色）下进行以下输入[type='text']。因此，最终用户无法单击输入。

<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背景来执行此操作

像这个小提琴的东西？图像的z-index应大于叠加层。