CSS 透明度 (不透明度)




 
 
CSS Color 」を学習する際に、rgba() と hsla() で色の透明度を設定できることはすでに学習しましたが、これらは色を定義しながら透明度を設定することしかできず、画像などの透明度を設定することはできません。

 

要素の透明度を設定するために CSS で opacity プロパティが提供されます。これは、色だけでなく、ページ上の画像やその他の要素にも有効です。その構文形式は次のとおりです。

opacity: number;

このうちnumberは要素の透明度を表す0から1までの浮動小数点数(10進数)で、値が小さいほど透明度が高くなります(0は完全に透明、1は完全に不透明)。

また、opacity 属性を使用する場合は、次の点に注意する必要があります。

  • 要素が opacity 属性を定義し、その値が 1 未満の場合、その子要素も同じ透明度になります。
  • 他の要素が配置されていない要素である場合、この要素のスタック レベルは他の要素より高くなります。
  • 定義された opacity 属性値が指定された範囲を超える場合、最も近い値をインターセプトします。たとえば、1.5 は 1 としてインターセプトされます。

[例] opacity 属性を使用して、要素の透明度を設定します。

 <!DOCTYPE html>
<html>
<head>
    <style>
        .img {
            width: 150px;
        }
        .img:last-child {
            opacity: 0.4;
            margin-left: 30px;
        }
    </style>
</head>
<body>
    <img src="./css.png" alt="" class="img">
    <img src="./css.png" alt="" class="img">
</body>
</html> 

実行結果は次の図のとおりです。

図: opacity プロパティのデモ
図: opacity プロパティのデモ

IE ブラウザの IE8 以前のバージョンは opacity 属性をサポートしていません. これらのブラウザで透過性を実現したい場合は、filter 属性を使用できます. 構文は次のとおりです:

filter: alpha(opacity = number);

number の値の範囲は 0 ~ 100 で、値が小さいほど透明になります。

[例] filter 属性を使用して要素の透明度を設定する:

 <!DOCTYPE html>
<html>
<head>
    <style>
        img {
            width: 150px;
        }
        img.image_two {
            filter: alpha(opacity=50);
            margin-left: 30px;
        }
    </style>
</head>
<body>
    <img src="./css.png" class="img_one">
    <img src="./css.png" class="image_two">
</body>
</html> 

実行結果は次の図のとおりです。

図: フィルター: alpha(opacity=x) プロパティのデモ
図: フィルター: alpha(opacity=x) プロパティのデモ

すべてのブラウザーで透過性を実現できるようにするために、次のように不透明度とフィルター プロパティを同時に定義できます。

p {
    opacity: 0.5;
    filter: alpha(opacity=50);
}

 

「 CSS 透明度 (不透明度)」についてわかりやすく解説!絶対に観るべきベスト2動画

超!初心者のためのCSS講座 要素の透明度を指定する【 opacity 】
透明度を指定する「opacity」とは?hoverと組み合わせて使用する方法【CSSの基礎】