ホームページ > 記事 > ウェブフロントエンド > CSSに隠し要素を配置する方法
CSSに隠し要素を配置する方法
- 青灯夜游オリジナル
- 2021-04-28 16:03:257183ブラウズ
CSS プレースホルダーで要素を非表示にする方法: 1. 可視性属性を使用し、「visibility: hidden;」スタイルを要素に設定します。要素は非表示になっていますが、元のスペースを占有しています。2. 次を使用します。 opacity 属性では、要素に「opacity:0;」スタイルを設定するだけです。
このチュートリアルの動作環境: Windows 7 システム、CSS3&HTML5 バージョン、Dell G3 コンピューター。
方法 1: visibility: hidden;プレースホルダーを非表示にする
visibility 属性は、要素が表示されるかどうかを指定します。
この属性は、要素によって生成される要素ボックスを表示するかどうかを指定します。これは、要素がまだ元のスペースを占めていますが、完全に非表示になる可能性があることを意味します。値の折りたたみは、テーブル レイアウトから列または行を削除するためにテーブルで使用されます。
例:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>元素隐藏--visibility: hidden</title>
<style>
.visibility{
visibility: hidden;
}
</style>
</head>
<body>
<div>正常显示元素</div>
<div class="visibility">隐藏元素</div>
<div>正常显示元素</div>
</body>
</html>
方法 2: opacity: 0 プレースホルダーを非表示にする
opacity 属性は、要素の透明度を設定することを意味します。要素の境界ボックスを変更するようには設計されていません。
これは、不透明度を 0 に設定すると、要素が視覚的に非表示になるだけであることを意味します。要素自体は引き続き独自の位置を占め、Web ページのレイアウトに貢献します。これは、上記の「visibility: hidden」に似ています。
例:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>元素隐藏--opacity: 0</title>
<style>
.opacity{
opacity: 0;
}
</style>
</head>
<body>
<div>正常显示元素</div>
<div class="opacity">隐藏元素</div>
<div>正常显示元素</div>
</body>
</html>
(学習ビデオ共有: css ビデオ チュートリアル)
以上がCSSに隠し要素を配置する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。