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

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

opacityとは

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を指定しています。透明のため見えなくなっています。