css - 如何阻止元素

Question

我有一个显示一堆内容的 Web 应用程序，我希望某些元素上有一个 50% 透明的图像，以便用户可以看到其中的内容但无法访问它。

这可以用 CSS 完成吗？

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

Answer 1

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

See example →

---

但是，如果您坚持用另一个元素来阻止它，您可以使用 relative 和 absolute 定位以及带有以下 HTML 的包装器 div:

<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 →