透明度rgba、光学と非表示表示の違い、cssでの可視性

1.透明性

1.rgba

R: 赤の値 G: 緑の値 B: 青の値 A: 透明度: 値は 0 から 1 の間、0 は完全に透明、1 は完全に不透明

rgba の透明度は現在のボックスに対してのみ有効で、サブボックスには影響せず、ボックスの内容にも影響しません

コード例:

<スタイル>
/* rgba */
.rgbaBox { 幅: 200px; 高さ: 200px; 背景色: rgba(30, 251, 1, 0.2); 色: ロイヤルブルー; }

.box { 幅: 100px; 高さ: 100px; 背景色: 赤; } </style>

<body>
<div class="rgbaBox">
<div class="box">rgba サブボックス</div>
</div>
</body>

2.光学

構文: opticy: 値は 0 から 1 の間で、0 は完全に透明、1 は完全に不透明です。

子要素は親要素の opacity 属性の値を継承し、opticy はボックスを透明にするだけでなく、ボックス内のコンテンツも透明にします

コード例:

<style>
/* opticy */
.opticyBox { 幅: 200px; 高さ: 200px; 背景色: 青紫; 赤色; 不透明度: 0.2; }

.box { 幅: 100px; 高さ: 100px; 背景色: 黄色; } </style>

<body>
<div class="opticyBox">
<div class="box">opticy的子盒子</div>
</div>
</body>

2.表示と非表示

1.ディスプレイ

表示: なし、非表示の要素を意味します

親要素が display:none を設定すると、すべての子要素が非表示になり、子要素にどのような値が設定されていても効果がなく、非表示の要素はその位置を占めません。

コード例:

<style>
/* 表示 */
.displayBox { width: 200px; 高さ: 200px; 背景色: 青紫; 赤色; 表示: なし; }

.box { 幅: 100px; 高さ: 100px; 背景色: 黄色; }

.box2 { 幅: 100px; 高さ: 100px; 背景色: 赤; } </style>

<body>

<div class="displayBox">
<div class="box">サブボックスを表示</div> </div>
<
div class="box2">ボックスの下に表示</div>
</body>

2.視認性

visibility:hidden、要素が表示されていないことを示します

親要素が display:none を設定している場合、すべての子要素は非表示になりますが、非表示の要素は引き続きその位置を占有します

子要素が可視に設定された後は、親の影響を受けません

コード例:

<style>
/* 可視性 */
.visibilityBox { width: 200px; 高さ: 200px; 背景色: 緑; 赤色; 可視性: 非表示; }

.box { 幅: 100px; 高さ: 100px; 背景色: プラム; }

.box2 { 幅: 100px; 高さ: 100px; 背景色: 黄色; } </style>

<body>

<div class="visibilityBox">
<div class="box">可視性のサブボックス</div> </div>
<
div class="box2">可視性の下ボックス</div>
</body>

透明度rgba、光学と非表示表示の違い、cssでの可視性

おすすめ