オリジナルリンク：CSSでページ要素への5つの方法を隠す、転載元を明記してください！
ページ要素を非表示にCSSを使用する多くの方法があります。その後、不可視領域に設定され、視認性が隠しに設定され、表示は絶対位置にnoneまたは位置に設定され、0に不透明度を設定することができます。
我々は要素を非表示にするには、非常に多くの技術を持っていますが、それらはすべて同じ効果を達成するために見て、なぜあなたは今まで疑問に思っていますか？これらの違いは、特定の状況で使用する方法を決定し、それぞれの方法は、他の方法の中で、実際には、いくつかの微妙な違いがあります。このチュートリアルでは、あなたが覚えておく必要があり、それらの小さな違いをカバーする、あなたの状況は、要素を非表示にするためにあなたは、これらの方法上記の適切な方法を選択してみましょう。
不透明度
不透明度プロパティは、透明性の要素を設けられています。これは、バウンディングボックス要素（バウンディングボックス）やデザインを変更することはありません。これは、不透明度だけ、視覚的要素を非表示にすることができます0に設定されていることを意味しています。要素自体は、まだ自身の位置のレイアウト作業やWebページを占有しています。また、ユーザーとの対話に応答します。
.hide {
不透明度：0。
}
あなたは、画面読み上げソフトウェアに不透明プロパティの隠し要素を使用する予定の場合は、残念ながら、あなたはそうすることができません。要素とそのすべての内容は同じようにページ上の他の要素と同様に、画面読み上げソフトウェアを読み込まれます。言い換えれば、要素は、一貫性に作用し、彼らが不透明であるとき。
私はまた、不透明度プロパティがいくつかの素晴らしいアニメーション効果を達成するために使用することができ、1を思い出させるしたいと思います。要素1の不透明度プロパティ未満の任意の値は、新しいコンテキストスタック（積み重ねコンテキスト）を作成します。
以下の例を参照してください。
@SitePointを見て、「不透明度と隠し要素」の例を提供
ときにあなたのマウス隠された第二のブロック、完全に不透明に完全に透明から元素の円滑な移行を超えます。ブロックは、ユーザがそれと対話することができることを示し、ポインタにカーソルプロパティを設定します。
可視
第二の属性は、視認性を言うことです。その値は、私たちの隠された要素を非表示に設定されています。不透明度の施設として、隠された要素はまだ私達のウェブページのレイアウト作業を持っています。そして、不透明唯一の違いは、それが任意のユーザーとの対話に応答しないことです。また、要素は、画面読み取りソフトウェアに表示されなくなります。
このプロパティは、それが最初と最後の状態と同じではありません限り、アニメーション効果を達成することができます。これは、スイッチング時間の可視性の状態間の遷移アニメーションが（ - 翻訳者のメモこの遅延は、実際に隠された要素を用いて達成することができる表示と非表示）平滑であってもよいことを保証します。
.hide {
可視性：隠されました。
}
次の例では、異なるどのような種類の可視性と不透明度を示しています。
@SitePointを見て、「可視性と隠し要素」の例を提供
限り、その要素の可視性を明示的に翻訳の.oに隠すP--の内部の一例として、（可視に設定することができますよう、視認性の要素が隠されるように設定されている場合は、同時に、あなたはその子孫要素の一つを表示したい、ということに注意してください注）によります。pタグ番号でホバーしていない、隠された要素の上に置くだけで試してみてください、あなたはあなたのマウスカーソルが指が方法ではありませんになっていることがわかります。この時点で、あなたは、イベントがトリガされません]をクリックし、マウスをクリックしてください。
<p>タグ内の<div>タグでは、あなたはまだ、すべてのマウスイベントをキャプチャすることができます。テキストの上にマウスは、<div>自体が目に見えるようになるとしたらイベント登録も有効になります。
表示
意味の隠し要素に基づいて不動産を表示します。noneに表示プロパティは、要素が見えなくてもボックスモデル生成されないようにします。このプロパティを使用すると、任意のスペースを占有しない隠し要素です。だけでなく、ディスプレイがnoneに設定されると、任意の直接的なユーザインタラクションを打つ、という、要素が効果を取ることができません。また、画面読み上げソフトウェアは、要素の内容を読み取ることはありません。それは完全に存在しない要素として、このように生成された効果を示します。
その要素のいずれかの子孫が同時に表示されなくなります。このプロパティは無効であるため、遷移アニメーションを追加し、それは常にすぐに有効になります任意の値の異なる状態に切り替えます。
しかし、まだDOMを通じて要素へのアクセス権を持って、注意してください。だから、他の要素の動作と同様、DOMを通してそれを操作することができます。
.hide {
表示：なし。
}
以下の例を参照してください。
「表示と非表示の要素」の例を提供@SitePoint
あなたは第二のブロック要素内の<p>要素は、独自の表示属性をブロックするように設定されて表示されますが、それはまだ見えません。隠された、ディスプレイ：なしでもう一つの違いは、この可視性ではありません。前の例では、明示的に目に見えるに設定された任意の子孫要素の可視性は、それが見えるようにすることができますが、表示は関係なく、その表示値が何であるか、限り表示素子はなしの祖先があるとして、彼らはない、それを食べていません表示されていません。
今、それをクリックした後、最初の数回の上のブロック要素の上にマウスを移動します。このアクションは、それが0よりも大きいデジタル数であろう要素が出てくる第二のブロックを引き起こします。これは、要素がそのようにユーザを隠すように配置されている場合でも、ためであるか、またはJavaScriptを使用して動作させることができます。
ポジション
あなたはそれと対話したい要素があると仮定すると、あなたはそれがあなたのページのレイアウトに影響を与えるようにする必要はありません、この状況（不透明度と可視性のレイアウトに影響を与えるに対処できていない適切な特性、表示がレイアウトに影響を与えませんが、直接対話することはできません - 翻訳者注）。この場合は、あなただけの表示可能領域のうちの要素を考慮することができます。このアプローチは、レイアウトのみに影響を与えないだろう、要素がそこに操作をすることができたままです。以下は、このアプローチのCSSを使用することです：
.hide {
位置：絶対。
トップ：-9999px;
左：-9999px;
}
以下の例は、それの前に、実施例と同様の効果すなわち、絶対配置要素を介して非表示にする方法を示しています。
@SitePointを見て、「位置属性と隠し要素」の例を提供
この方法の主な原理は、それが画面上に表示されていない、十分に大きな負の数になるように設定されている上部と左側の要素によるものです。この技術（または潜在的な欠点を）使用する利点の1つは、それが画面読み取りソフトウェアが読むことを可能要素の内容を隠していることです。あなただけのユーザーがそれを見ることができないように、表示領域外の要素を移動しようとしているので、これは、理解しやすいです。
あなたは、あなたがしなければ、ユーザーの焦点は、予想外のスイッチ焦点になりその要素を作るために、フォーカスを受け取ることができる任意の要素を非表示にするには、このメソッドの使用を避ける必要があります。カスタムのチェックボックスとラジオボタンを作成する場合は、この方法がしばしば使用されています。（DOMのチェックボックスとラジオボタンとアナログが、スイッチング集中する「受信」するために、真のチェックボックスやラジオの要素を非表示にするには、このメソッドを使用して - 翻訳者の注意を）
クリップパス
要素を非表示にするもう一つの方法は、彼らが調整することによって達成したことです。過去には、これは、クリップのプロパティを介して達成することができますが、プロパティはクリップパスと呼ばれる優れた性質によって置き換えられ、放棄されました。ニティッシュ・クマールは最近、このプロパティのより高度な使用法を学ぶためにそれを読むことによって、SitePointの「はじめにclicpパスのプロパティ」の記事を掲載しました。
クリップパスは、完全にIEまたはエッジでサポートされていない属性、覚えておいてください。あなたがクリップパスに外部SVGファイルを使用したい場合は、ブラウザのサポートはさらに低いです。次のように隠された要素のコードを使用してクリップ・パスプロパティはになります。
.hide {
クリップパス：ポリゴン（0PXの0PX、0PXの0PX、0PXの0PX、0PXの0PX）。
}
以下は、その使用の実用的な例です。
例としては、@SitePoint提供を参照「クリップパスで隠し要素の属性。」
あなたが最初の要素の上にマウスを置く場合は2番目の要素はクリップパスによって隠されているが、それはまだ、第二の要素に影響を与えることができます。あなたはそれをクリックすると、それはしましょう、隠されたクラスを削除するために使用される要素は、その位置から出てきます。テキスト内の要素によって隠さまだスクリーンリーダーで読み取ることができ、多くのWordPressのサイトでは、画面読み上げソフトウェアのために特別に書き込みを行うようにクリップパスまたは前のクリップを使用します。
私たちは、もはや要素自体を表示しませんが、それはまだそれがのように見えていたかのように周りの要素の振る舞いによって占め、このサイズの長方形を占めています。マウスのクリックなどのユーザーとの対話を覚えていたりクリッピング領域外の効果を取ることができないホバリング。この例では、トリミング領域のサイズは、ユーザーが隠し要素と直接対話することはできないことを意味し、ゼロです。また、このプロパティは、異なる遷移アニメーション効果のさまざまな方法を使って実施することができます。
結論
このチュートリアルでは、CSSの要素法によって隠さ異なる5を見ました。これらの方法の各々は、他のいくつかのとは少し異なっています。あなたが達成したいものを知っているあなたが時間をかけてとるプロパティ決めるのに役立ちます、あなたは、実際のニーズにできるようになり、本能的に応じて最善の方法を選択しました。これらの方法は、任意の質問を持っているため、あなたが要素を非表示にした場合、コメントにメッセージを残してください。
ます。https：//www.cnblogs.com/imhurley/p/5664137.htmlで再現