CSS opacity 透明度を指定するサンプル

CSSのopacityプロパティで、透明度を指定するサンプルです。

仕様	opacityプロパティの仕様
サンプル	opacityプロパティのサンプル

opacityプロパティの仕様

opacity : 値

opacityプロパティは、透明度を指定します。

値	説明
数値	0.0から1.0の数値を指定します。 0.0が透明の値で、1.0が不透明の値です。透明になるほど背景が透けて見えるようになります。初期値は1.0です。 opacityは、不透明度という意味です。
値を継承しない

以下はMDNのopacityプロパティのリンクです。
https://developer.mozilla.org/ja/docs/Web/CSS/opacity

opacityプロパティのサンプル

透明度を指定するサンプルです。
opacityプロパティの値を1.0から0.2ずつ下げています。
一番下は、opacity 0.0を指定していますが透明のため見えなくなっています。

opacity 1.0

opacity 0.8

opacity 0.6

opacity 0.4

opacity 0.2

opacity 0.0

上記サンプルのコードです。

<style>
  .test1 {
    opacity: 1;
  }
  .test2 {
    opacity: 0.8;
  }
  .test3 {
    opacity: 0.6;
  }
  .test4 {
    opacity: 0.4;
  }
  .test5 {
    opacity: 0.2;
  }
  .test6 {
    opacity: 0;
  }
  .c1 div {width: 50%;border: 1px solid #000;background: #e0ffff;
    height: 50px;margin-bottom: 20px;text-align: center;}
</style>
<body>
  <div class="c1">
    <div class="test1">opacity 1.0</div>
    <div class="test2">opacity 0.8</div>
    <div class="test3">opacity 0.6</div>
    <div class="test4">opacity 0.4</div>
    <div class="test5">opacity 0.2</div>
    <div class="test6">opacity 0.0</div>
  </div>
</body>

1.0が不透明の値で、0.0が透明の値です。