Apakah opacity: 0 memiliki efek yang sama persis dengan visibility: hidden

Jika demikian, apakah tindakan tersebut secara efektif menghilangkan visibilityproperti?

(Saya menyadari bahwa Internet Explorer belum mendukung properti CSS2 ini.)
Perbandingan mesin tata letak

Lihat juga: Apa perbedaan antara visibilitas: tersembunyi dan tampilan: tidak ada

Berikut adalah kompilasi informasi terverifikasi dari berbagai jawaban.

Masing-masing properti CSS ini unik. Selain merender elemen yang tidak terlihat, mereka memiliki efek tambahan berikut:

1. Menciutkan ruang yang biasanya ditempati elemen tersebut
2. Merespons acara (mis., Klik, tekan tombol)
3. Berpartisipasi dalam taborder tersebut

                     ciutkan taborder acara
opacity: 0 Tidak Ya Ya
visibility: hidden No No No
jarak pandang: runtuh Ya * Tidak Tidak
tampilan: tidak ada Ya Tidak Tidak

* Ya di dalam elemen tabel, jika tidak Tidak.

Tidak.

Elemen dengan opasitas membuat konteks susun baru.

Selain itu, spesifikasi CSS tidak mendefinisikan ini, tetapi elemen dengan opacity:0dapat diklik, dan elemen dengan visibility:hiddentidak.

Tidak. Ada perbedaan besar. Mereka serupa karena Anda dapat melihat melalui elemen jika visibilitas disembunyikan atau opacity 0, namun

opacity: 0 : Anda tidak dapat mengklik elemen di belakangnya.

visibility: hidden : Anda dapat mengklik elemen di belakangnya.

Ada banyak perbedaan antara visibilitydan opacity. Sebagian besar jawaban menyebutkan beberapa perbedaan, tetapi berikut adalah daftar lengkapnya.

1. opacity tidak mewarisi, sedangkan visibilitas memilikinya

2. opacity dapat dianimasikan sementara visibilitas tidak.
   (Ya, secara teknis memang demikian, tetapi tidak ada perilaku yang ditentukan untuk, katakanlah, "37% diciutkan dan 63% disembunyikan", jadi Anda dapat menganggap ini sebagai tidak dapat dianimasikan.)

3. Menggunakan opacity, Anda tidak dapat membuat elemen turunan lebih buram dari induknya. Misalnya jika Anda memiliki ap dengan warna: hitam dan opasitas: 0,5, Anda tidak dapat membuat anak-anaknya menjadi hitam sepenuhnya. Nilai yang valid untuk opasitas adalah antara 0 dan 1, dan contoh ini membutuhkan 2!
   Akibatnya, menurut komentar Martin , Anda dapat memiliki anak yang terlihat (dengan visibilitas: terlihat) dalam orang tua yang tidak terlihat (dengan visibilitas: tersembunyi). Ini tidak mungkin dengan opacity; jika orang tua memiliki opacity: 0; anak-anaknya selalu tidak terlihat.

4. Jawaban Kornel menyebutkan bahwa nilai opasitas kurang dari 1 menciptakan konteks susunnya sendiri; tidak ada nilai untuk visibilitas.
   (Saya berharap dapat memikirkan cara untuk mendemonstrasikan ini, tetapi saya tidak dapat memikirkan cara apa pun untuk menunjukkan konteks penumpukan visibilitas: elemen tersembunyi.)

5. Menurut jawaban philnash , elemen dengan opacity: 0 masih terbaca oleh screen reader, sedangkan visible: elemen tersembunyi tidak.

6. Menurut jawaban Chris Noe , visibilitas memiliki lebih banyak opsi (seperti menutup) dan elemen yang tidak terlihat tidak lagi merespons klik dan tidak dapat di-tab.

(Menjadikan ini wiki komunitas, karena meminjam dari jawaban yang ada tidak akan adil jika tidak.)

Saya tidak sepenuhnya yakin tentang ini, tetapi saya pikir pembaca layar tidak membaca hal-hal yang disetel ke visibilitas tersembunyi, tetapi mereka dapat membaca berbagai hal terlepas dari opasitasnya.

Itulah satu-satunya perbedaan yang dapat saya pikirkan.

Saya tidak yakin sepenuhnya, tetapi inilah cara saya melakukan transparansi lintas browser:

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

objek dengan Visibilitas: tersembunyi masih memiliki bentuk, mereka tidak terlihat. elemen nol opasitas masih dapat diklik dan bereaksi terhadap peristiwa lain.

Saat membuat gaya pengguna yang memengaruhi elemen dalam a contenteditable, saya perhatikan bahwa jika Anda menyetel sesuatu ke visibility: hidden, maka tanda sisipan masukan tidak benar-benar ingin berinteraksi dengannya. Misalnya jika sudah

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

... maka tampaknya jika Anda memfokuskan div / span itu, Anda tidak dapat benar-benar mengetik di dalamnya. Padahal dengan opacity: 0itu sepertinya Anda bisa. Saya belum mengujinya secara ekstensif, tetapi menurut saya hal ini layak untuk disebutkan di sini karena tidak ada orang lain di halaman ini yang membicarakan tentang efek pada input teks. Ini tampaknya mungkin terkait dengan hal-hal peristiwa yang disebutkan di atas.

Apa yang dikatakan Phil itu benar.

IE mendukung opacity:

filter:alpha(opacity=0);

Properti memiliki arti semantik yang berbeda . Meskipun CSS semantik terdengar konyol, seperti yang disebutkan oleh pengguna lain, hal itu berdampak pada perangkat seperti pembaca layar - tempat semantik memengaruhi aksesibilitas halaman.