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

opacityのサンプルです。

目次	opacity
	opacityの1 / 0.8 / 0.6 / 0.4/ 0.2 / 0.0

opacity

書き方	opacity : 値
数値	0.0から1.0までを指定します。 0.0が透明の値で、1.0が不透明の値です。背景色と文字ともに透明になるほど背景が透けて見えるようになります。 opacityは、不透明度という意味です。
初期値	1.0
継承	なし
参考(MDN)	https://developer.mozilla.org/ja/docs/Web/CSS/opacity

offset-x

<style>
  .test1 {
    opacity: 1;
    background: #e0ffff;
    width: 200px;
  }
</style>
<body>
  <div class="test1">offset-x</div>
</body>

offset-x

<style>
  .test2 {
    opacity: 0.8;
    background: #e0ffff;
    width: 200px;
  }
</style>
<body>
  <div class="test2">offset-x</div>
</body>

offset-x

<style>
  .test3 {
    opacity: 0.6;
    background: #e0ffff;
    width: 200px;
  }
</style>
<body>
  <div class="test3">offset-x</div>
</body>

offset-x

<style>
  .test4 {
    opacity: 0.4;
    background: #e0ffff;
    width: 200px;
  }
</style>
<body>
  <div class="test4">offset-x</div>
</body>

offset-x

<style>
  .test5 {
    opacity: 0.2;
    background: #e0ffff;
    width: 200px;
  }
</style>
<body>
  <div class="test5">offset-x</div>
</body>

offset-x

<style>
  .test6 {
    opacity: 0;
    background: #e0ffff;
    width: 200px;
  }
</style>
<body>
  <div class="test6">offset-x</div>
</body>

opacity 0.0を指定しています。透明のため見えなくなっています。