CSSの不透明度のプロパティと画像の不透明度の説明

このopacityプロパティは、要素の不透明度を0.0から1.0のスケールで制御します。値が小さいほど、要素の透明度が高くなります。

要素をどの程度透明にするかを選択できます。透明度レベルを達成するには、次のCSSプロパティを追加する必要があります。

完全に不透明

.class-name { opacity: 1; } /* OR */ .class-name { opacity: 1.0; }

半透明

.class-name { opacity: 0.5; }

完全に透明

.class-name { opacity: 0; } /* OR */ .class-name { opacity: 0.0; }

または、を使用rgbaして要素の不透明度を設定することもできます。

.class-name{ background-color: rgba(0, 0, 0, .5); }

これbackground-colorにより、要素のが不透明度50%の黒に設定されます。値の最後の値rgbaアルファ値です。1のアルファ値は100%の不透明度に等しく、0.5(または上記のように.5)は50%の不透明度に等しくなります。

画像の不透明度と透明度

このopacityプロパティを使用すると、画像の不透明度を下げることで画像を透明にすることができます。

Opacity 0.0から1.0の間の値を取ります。

1.0はすべての画像のデフォルト値です。完全に不透明です。

img { opacity: 0.3; }

filter: alpha(opacity=x)IE8以前に含めます。xは0〜100の値を取ります。

img { opacity: 0.3; filter: alpha(opacity=30); }

上記の例のパラメータに設定された画像の例を次に示します。

不透明度30%の画像

とペアリングopacity:hoverて、動的なマウスオーバー効果を作成できます。

例:

img { opacity: 0.3; filter: alpha(opacity=30); } img:hover { opacity: 1.0; filter: alpha(opacity=100); }

ホバーすると不透明になる透明な画像を表示するコーデックの例

画像はデフォルトで不透明度1.0であるため、少ないコードで逆の効果を作成できます。

例:

img:hover { opacity: 0.3; filter: alpha(opacity=30); }

これは、マウスオーバーで透明度を表示するためのコーデックの例です。

CSSの詳細

カスケードスタイルシート(CSS)

CSSは、Cascading StyleSheetsの頭字語です。これは1996年に最初に発明され、現在ではすべての主要なWebブラウザーの標準機能です。

CSSを使用すると、開発者はWebページのHTML構造を「スタイル設定」することにより、Webページの外観を制御できます。

CSS仕様は、World Wide Web Consortium(W3C)によって維持されています。

この純粋なCSSMinesweeperゲーム(JavaScriptを使用しない)など、CSSだけでかなり驚くべきものを構築できます。