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 サイトの他の関連記事を参照してください。