CSS オパシティ（透明度）

opacity CSS属性は要素の透明度を指定します。opacity属性は要素の透明度を指定します。つまり、opacity属性は要素の背後の背景が覆われる程度を指定します。

クロスブラウザ透明度

今では、透明度（opacity）はCSS3規範の一部ですが、長い間存在してきました。しかし、古いブラウザは不透明度や透明度を指定する方法が異なります。

Firefox、Safari、Chrome、OperaおよびIE9のCSS不透明度

これはすべての現在のブラウザでCSS不透明度の最新语法です。

p　{
　　　　opacity:　0.7;
}

上記のスタイルルールは、段落要素70％不透明（または30％透明で、この値

opacity属性の値は0.0から1.0を設定すると、opacity:1;は要素を完全不透明（0％透明）にします。opacity: 0;は要素を完全に透明（0％透明）にします。100％透明で、この値

Internet Explorer 8およびより低いバージョンでのCSS透明度の実装方法

Internet Explorer 8およびより古いバージョンは、要素の透明度を指定するためにMicrosoftの属性「alphaフィルタ」をサポートしています。

p　{
　　　　filter:　alpha(opacity=50);
　　　　zoom:　1;　　/*　IE用の修正7　*/
}

すべてのブラウザに対応するCSS透明度

上記の2つのステップを組み合わせることで、すべてのブラウザの透明性コード。

p　{
　　　　opacity:　0.5;　　/*　現代のブラウザ用の透明度　*/
　　　　filter:　alpha(opacity=50);　　/*　IE用の透明度8　およびより低い　*/
　　　　zoom:　1;　　/*　IE用の修正7　*/
}

CSS画像透明度

CSS Opacityを使用して透明な画像を作成することもできます。

以下の図には、同じソース画像から取得した3つの画像があります。これらの間の唯一の違いは透明度です。

マウスオーバー時の画像透明度変更

以下の例では、CSS画像透明度の一般的な使用法を示しています。ユーザーがマウスカーソルを画像に合わせると、画像の透明度が変更されます。

—マウスカーソルを画像に合わせて効果を確認してください。

透明フレーム内のテキスト

要素に不透明度を使用する場合、背景だけでなく、すべての子要素も透明になります。不透明度の値が高くなると、透明要素内のテキストの読み取りが難しくなります。

このような状況を防ぐために、透明なPNG画像を使用することもできます。また、テキストブロックを透明なフレームの外に配置し、負のマージンまたはCSS定位それを視覚的に内部に押し込む。

div　{
　　　　float:　left;
　　　　opacity:　0.7;
　　　　border:　1px　solid　#949781;
}
p　{
　　　　float:　left;
　　　　position:　relative;
　　　　margin-left:　-400px;
}

RGBAを使用するCSS透明度

RGBを除いて、CSS3また、新しい方法RGBAが導入され、色を指定する際にalpha透明度を色値の一部として含めることができます。RGBAはRed Blue Green Alphaを意味します。

RGBA宣言は、色の透明度を設定する非常に簡単な方法です。

div　{
　　　　background:　rgba(200,　54,　54,　0.5);
}
p　{
　　　　color:　rgba(200,　54,　54,　0.25);
}

の前三个数字はRGB値の色を示します、すなわち赤色（0-255），緑色（0-255），青色（0-255），第四の数字は0から1の間のalpha透明度値（0は色が完全に透明、値1完全不透明にする。

RGBAの透明度について注意すべき重要な特徴は、-単一の色の透明度を指定する能力。

—テキストの色を無視して、背景の透明度のみを変更する。

RGBAを使用すると、単一の色を指定するのが簡単になりますが、RGBA色をサポートしていないブラウザ用にバックアップ色を定義することを常に推奨します。

RGBA宣言のバックアップ色

すべてのブラウザではRGBA色がサポートされていません。しかし、サポートしていないブラウザには、例えば、純色や透過PNG画像などの他の選択肢を提供することができます。

p　{
　　　　/*　webブラウザに対するフィールバック39;t　support　RGBA　*/
　　　　background:　rgb(0,　0,　0);
　　　　/*　RGBa　with　0.5　透明度　*/
　　　　background:　rgba(0,　0,　0,　0.5);
}