ホームページ > 記事 > ウェブフロントエンド > CSSでテキストを非表示にする方法
テキストを非表示にする方法: 1. 表示属性、構文「display:none;」を使用します。 2. 可視性属性、構文「visibility: hidden;」を使用します。 3. 不透明度属性、構文「不透明度:0 ;」。
このチュートリアルの動作環境: Windows 7 システム、CSS3&HTML5 バージョン、Dell G3 コンピューター。
1. 表示属性を使用します
表示属性は実際の非表示要素です。要素の表示属性がなしの場合、要素はビジョンから消えます。ボックスモデルも生成されず、ページ上のどの位置にも配置されず、さらにその子要素も一緒にボックスモデルから消えてしまいます。
.hide { display: none; }
注: これとその子要素に追加されたアニメーション効果やインタラクションは機能しません。
2, visibility 属性を使用する
visibility 属性は opacity 属性と似ています。この属性の値が非表示の場合、要素は非表示になります。独自の位置を占め、Web ページのレイアウトに貢献します。不透明との唯一の違いは、ユーザーの操作に応答しないことです。さらに、要素は画面読み上げソフトウェアで非表示になります。
.hide { visibility: hidden; }
注: この属性は、初期状態と終了状態が異なる限り、アニメーション効果を実現することもできます。これにより、表示状態の切り替え間の遷移アニメーションが時間的にスムーズになります。
3. 不透明度属性を使用します
不透明度属性とは、オブジェクトの不透明度を取得または設定することを意味します。透明度が 0 の場合、視覚的には見えなくなります。彼は今でもその地位を占めており、Web ページのレイアウトに役割を果たしています。ユーザーのインタラクションにも応答します。不透明度属性が追加された要素の場合、背景と要素の内容もそれに応じて変更されます。
.hide { opacity: 0; }
説明: 不透明度プロパティを使用すると、優れたアニメーション効果を実現できます。
注: この属性は IE9 以降のブラウザと互換性があります。IE8 以前のバージョンでは、代替フィルタ属性 (例: filter:Alpha(opacity=50)
) がサポートされています。
推奨学習: css ビデオ チュートリアル
以上がCSSでテキストを非表示にする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。