CSSで背景を不透明にする方法

Web デザインでは、背景色や背景パターンは非常に重要な要素です。ただし、他の要素を表示できるように背景色やパターンを透明にしたい場合があります。これには、CSS 背景不透明テクノロジの使用が必要です。

実装方法

CSS 背景の不透明度を実装するにはさまざまな方法があります:

1. RGBA 形式のカラー値を使用します

RGBA 形式 カラー値には、赤の値 (0 ～ 255)、緑の値 (0 ～ 255)、青の値 (0 ～ 255)、透明度 (0 ～ 1) の 4 つのプロパティが含まれます。透明度プロパティを設定すると、背景色や模様を不透明にすることができます。

例:

background-color: rgba(255, 255, 255, 0.5);

このスタイル ルールは、ページに白い半透明の背景を追加します。 。

2. 不透明度属性の使用

CSS3 では、不透明度属性を使用して要素の透明度を設定できます。このプロパティは 0 ～ 1 の値を受け入れます。デフォルトは 1 で、完全な不透明を意味します。 0.5 は 50% の不透明度を表します。

例:

background-color: black;
opacity: 0.5;

このスタイル ルールは、黒の半透明の背景をページに追加します。

3. background-color プロパティとbackground-image プロパティを使用する

background-color プロパティとbackground-image プロパティを同時に使用して、背景の不透明度を実現することもできます。この方法では、最初に画像を透過 PNG 画像に処理する必要があります。

例:

background-color: #000;
background-image: url(images/transparent-background.png);

このスタイル ルールは、ページに黒の半透明の背景画像を追加します。

アプリケーション シナリオ

CSS の背景の不透明度は、さまざまな効果を実現するために使用できる非常に強力なテクノロジです。

1. 中断されたプロンプト情報

マウスがリンクまたはボタン上に移動すると、通常はプロンプト ボックスをポップアップする必要があります。この場合、セミ-透明な背景。

例:

.tooltip-wrapper {

position: relative;

}

.tooltip {

position: absolute;
top: 100%;
left: 0;
background-color: rgba(0, 0, 0, 0.5);
color: #fff;
padding: 10px;
display: none;

}

display: block;

カルーセル グラフのフェードインおよびフェードアウト効果

position: relative;

position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
transition: opacity 1s ease-in-out;

opacity: 1;

position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);

以上がCSSで背景を不透明にする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。