opacity：0は、visibility：hiddenとまったく同じ効果がありますか？

もしそうなら、それはvisibilityプロパティを効果的に廃止しますか？

（私はInternet ExplorerがこのCSS2プロパティをまだサポートしていないことを理解しています。）
レイアウトエンジンの比較

参照：visibility：hiddenとdisplay：noneの違いは何ですか

これは、さまざまな回答から検証された情報をまとめたものです。

これらのCSSプロパティはそれぞれ一意です。要素を非表示にレンダリングすることに加えて、次の追加の効果があります。

1. 要素が通常占めるスペースを縮小します
2. イベントに応答します（例：クリック、キープレス）
3. タブオーダーに参加する

                     イベントのタブオーダーを折りたたむ
不透明度：0いいえはいはい
可視性：非表示いいえいいえいいえ
可視性：折りたたみはい*いいえいいえ
表示：なしはいいいえいいえ

*はい、テーブル要素内で使用します。

番号。

不透明度のある要素は、新しいスタックコンテキストを作成します。

また、CSS仕様ではこれを定義していませんopacity:0が、を含む要素はクリック可能であり、を含む要素visibility:hiddenはそうではありません。

いいえ、違います。大きな違いがあります。可視性が非表示または不透明度が0の場合に要素を透視できるため、これらは似ていますが、

不透明度：0 ：その背後にある要素をクリックできません。

可視性：非表示：その背後にある要素をクリックできます。

との間には多くの違いがvisibilityありopacityます。ほとんどの回答はいくつかの違いについて言及していますが、ここに完全なリストがあります。

1. 不透明度は継承しませんが、可視性は継承します

2. 不透明度はアニメート可能ですが、可視性はアニメートできません。
   （まあ、技術的にはそうですが、「37％折りたたまれ、63％隠されている」などの動作は定義されていないので、これはアニメート不可能と見なすことができます。）

3. 不透明度を使用して、子要素をその親よりも不透明にすることはできません。たとえば、color：blackとopacity：0.5のapがある場合、その子を完全に黒にすることはできません。不透明度の有効な値は0〜1で、この例では2が必要です。
   したがって、Martinのコメントによれば、非表示の親（visibility：hidden）に表示される子（visibility：visible）を持つことができます。これは不透明度では不可能です。親の不透明度が0の場合。その子は常に見えません。

4. コーネルの答えは、不透明度の値が1未満の場合、独自のスタッキングコンテキストが作成されます。可視性の値はありません。
   （私はこれを実証する方法を考えたいと思いますが、visibility：hidden要素のスタッキングコンテキストを示す手段は考えられません。）

5. による philnashの回答に、opacity：0の要素はスクリーンリーダーで引き続き読み取られますが、visible：hidden要素は読み取られません。

6. クリス・ノエの答えによると、可視性にはより多くのオプション（折りたたみなど）があり、表示されない要素はクリックに応答せず、タブで移動できません。

（既存の回答から借用することは他の点では公平ではないため、これをコミュニティーwikiにします。）

完全にはわかりませんが、スクリーンリーダーは非表示に設定されているものを読み上げませんが、不透明度に関係なく読み上げる可能性があります。

それが私が考えることができる唯一の違いです。

私は完全にはわかりませんが、これは私がブラウザ間の透明性をどのように行うかです：

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

Visibility：hiddenのオブジェクトはまだ形をしており、表示されていません。不透明度ゼロの要素は引き続きクリックでき、他のイベントに反応します。

の要素に影響を与えるユーザースタイルを作成しているcontenteditableときにvisibility: hidden、何かをに設定した場合、入力キャレットはそれと対話したくないことに気付きました。例えばあなたが持っているなら

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

...そのdiv / spanにフォーカスすると、実際に入力できないようです。それでopacity: 0それができるようですが。私はこれを広範囲にテストしていませんが、このページの他の誰もテキスト入力への影響について話していないので、ここでこれを言及する価値があると考えました。これはおそらく上記のイベントに関連しているようです。

フィルが言うことは本当です。

IEは不透明度をサポートします。

filter:alpha(opacity=0);

プロパティには異なる意味の意味があります。セマンティックCSSはばかげているように聞こえるかもしれませんが、他のユーザーがスクリーンリーダーなどのデバイスに影響を与えるように聞こえますが、セマンティクスはページのアクセシビリティに影響を与えます。