Как заблокировать элемент

Question

У меня есть веб-приложение, которое отображает кучу контента, и я хочу, чтобы над некоторыми элементами было прозрачное изображение на 50%, чтобы пользователь мог видеть, что там, но не мог получить к нему доступ.

Можно ли это сделать с помощью CSS?

Я посмотрел на jQuery BlockUI, но мне это не подходит.

Answer 1

Если вам нужно, чтобы кто-то не нажимал на флажок или флажок, лучше установить атрибут disabled="disabled".

См. Пример →

---

Однако, если вы настаиваете на том, чтобы заблокировать его другим элементом, вы можете использовать позиционирование relative и absolute с div-оберткой со следующим 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%;
}

См. Пример →

Answer 2

Да, может.Просто убедитесь, что элементы, которые должны быть впереди, имеют более высокий z-индекс, чем элементы, которые должны быть за ними.

Answer 3

Вам нужно сделать элемент с CSS следующим образом:

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

height: 100%;
width: 100%;

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