如何阻止元素

Question

我有一个显示大量内容的Web应用程序，我希望其中一些元素在它们上面有50％的透明图像，以便用户可以看到其中有什么但无法访问它。

可以用CSS完成吗？

我看过jQuery BlockUI，但我似乎不适合。

Answer 1

如果您需要阻止某人点击复选框或选择框，则最好设置属性disabled="disabled"。

See example →

---

但是，如果您坚持使用其他元素阻止它，则可以使用包含div的relative和absolute定位，并使用以下HTML：

<div class="wrap">
    <select><option>Disabled</option></select>
    <div class="blocker"></div>
</div>

和CSS：

.wrap { position:relative; }
.blocker {
    background:rgba(0,0,0,0.3);
    position:absolute; top:0; left:0;
    width:100%; height:100%;
}

See example →

Answer 2

您需要使用CSS创建一个元素：

position: fixed;
top: 0;
left: 0;

height: 100%;
width: 100%;

background: black;
opacity: .5;
filter: alpha(opacity=50)

Answer 3

是的，它可以。只需确保需要在前面的元素具有比必须在它们后面的元素更高的z-index。