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>

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

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>

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

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

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

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

超！初心者のためのCSS講座　要素の透明度を指定する【 opacity 】

https://www.youtube-nocookie.com/watch?v=nDx_YlVzd7E&pp=ygUjIENTUyDpgI_mmI7luqYgKOS4jemAj-aYjuW6pikmaGw9SkE%3D

超！初心者のためのCSS講座　要素の透明度を指定する【 opacity 】 (https://www.youtube-nocookie.com/watch?v=nDx_YlVzd7E&pp=ygUjIENTUyDpgI_mmI7luqYgKOS4jemAj-aYjuW6pikmaGw9SkE%3D)

透明度を指定する「opacity」とは？hoverと組み合わせて使用する方法【CSSの基礎】

https://www.youtube.com/watch?v=JNOgphYV44A&pp=ygUjIENTUyDpgI_mmI7luqYgKOS4jemAj-aYjuW6pikmaGw9SkE%3D

css3