opacity
要素の透明度を0.0(透明)から1.0(不透明)の範囲で設定します。
div要素のように他の要素を内包できる要素に透明度を設定した場合は、内包している子要素にも透明度が適用されます。
CSS3より追加された属性です。
peko step
これは画像とテキストを内包するdiv要素の透明度を0.5に設定した状態です。
親要素が半透明化したことによってdiv要素内にある画像とテキストも半透明になっています。
div要素のように他の要素を内包できる要素に透明度を設定した場合は、内包している子要素にも透明度が適用されます。
CSS3より追加された属性です。
opacity: 0.5;
■ 表示例
peko step
親要素が半透明化したことによってdiv要素内にある画像とテキストも半透明になっています。
パラメータの設定
透明度
0.0が完全な透明で、数値が増えるごとに不透明になっていき、1.0で完全な不透明になります。
利用例
透明度を設定する
opacity: 0.0;
opacity: 0.3;
opacity: 0.6;
opacity: 1.0;
opacity: 0.3;
opacity: 0.6;
opacity: 1.0;
■ 表示される内容
0.0
0.3
0.6
1.0
img要素に0.0～1.0の透明度を設定した場合の一覧です。
0.0が完全な透明で、1.0に近づくごとに不透明になっていきます。
0.0が完全な透明で、1.0に近づくごとに不透明になっていきます。