Имеет ли opacity: 0 тот же эффект, что и visibility: hidden

Я не совсем уверен в этом, но я думаю, что программы чтения с экрана не читают вещи, для которых задана скрытая видимость, но они могут читать вещи независимо от их прозрачности.

Это единственная разница, о которой я могу думать.

Я не совсем уверен, но вот как я делаю кроссбраузерную прозрачность:

opacity: 0.6;
-moz-opacity: 0.6;
filter: alpha(opacity=60);

объекты с Видимостью: скрытые по-прежнему имеют форму, они просто не видны. Элементы с нулевой непрозрачностью по-прежнему можно щелкать и реагировать на другие события.

То, что говорит Фил, правда.

IE поддерживает непрозрачность:

filter:alpha(opacity=0);

Вот подборка проверенной информации из различных ответов.

Каждое из этих свойств CSS уникально. Помимо того, что элемент не отображается, они имеют следующие дополнительные эффекты:

1. Сворачивается пространство, которое элемент обычно занимает
2. Отвечает на События (например, щелчок, нажатие клавиши)
3. Участвует в табулатура

                     collapse events taborder
opacity: 0              No     Yes     Yes
visibility: hidden      No     No      No
visibility: collapse   Yes*    No      No
display: none          Yes     No      No

* Yes inside a table element, otherwise No.

Свойства имеют разные значения семантический. Хотя семантический CSS может показаться глупым, как отмечали другие пользователи, он влияет на такие устройства, как программы чтения с экрана, где семантика влияет на доступность страницы.

Нет.

Элементы с непрозрачностью создают новый контекст наложения.

Кроме того, спецификация CSS не определяет этого, но элементы с opacity:0 кликабельны, а элементы с visibility:hidden - нет.

Нет. Существует большая разница. Они похожи, потому что вы можете видеть сквозь элемент, если видимость скрыта или непрозрачность равна 0, однако

непрозрачность: 0: вы не можете щелкнуть на элементах позади него.

видимость: скрыто: вы можете щелкнуть на элементах позади него.

При создании пользовательского стиля, который влияет на элементы в contenteditable, я заметил, что если вы установите что-то на visibility: hidden, то курсор ввода на самом деле не хочет с ним взаимодействовать. Например, если у вас есть

<div contenteditable><span style='visibility: hidden;'></span></div>

... тогда кажется, что если вы сфокусируете этот div / span, вы не сможете его ввести. А с opacity: 0 вроде можно. Я не тестировал это подробно, но решил, что стоит упомянуть об этом здесь, поскольку никто на этой странице не говорил о влиянии на ввод текста. Возможно, это связано с упомянутым выше материалом События.

Между visibility и opacity есть много различий. В большинстве ответов упоминаются некоторые различия, но вот полный список.

1. непрозрачность не наследуется, а видимость наследуется

2. прозрачность можно анимировать, а видимость - нет. (Ну, технически это так, но просто не определено поведение, скажем, для «37% свернуто и 63% скрыто», поэтому вы можете рассматривать это как неанимируемое.)

3. Используя непрозрачность, вы не можете сделать дочерний элемент более непрозрачным, чем его родительский. НАПРИМЕР. если у вас есть p с color: black и opacity: 0.5, вы не можете сделать ни один из его дочерних элементов полностью черным. Допустимые значения непрозрачности - от 0 до 1, в этом примере потребуется 2!
   Следовательно, согласно Комментарий Мартина, у вас может быть видимый дочерний элемент (с видимостью: видимый) в невидимом родительском элементе (с видимостью: скрытый). Это невозможно с непрозрачностью; если у родителя непрозрачность: 0; его дети всегда невидимы.

4. Корнель ответ упоминает, что значения непрозрачности меньше 1 создают свой собственный контекст наложения; не имеет значения для видимости. (Хотел бы я придумать способ продемонстрировать это, но я не могу придумать никаких средств, чтобы показать контекст наложения элемента visibility: hidden.)

5. Согласно ответ Филнаша, элементы с opacity: 0 по-прежнему читаются программами чтения с экрана, а элементы visible: hidden - нет.

6. Согласно Ответ Криса Ноэ, у видимости есть больше опций (например, сворачивание), а элементы, которые не видны, больше не реагируют на щелчки и не могут быть открыты вкладками.

(Сделать это вики сообщества, поскольку в противном случае заимствование из существующих ответов было бы нечестным.)