CSS opacity 透明度を指定する

opacityとは

opacityは、透明度を指定します。

opacity : 値

値は以下を設定します。

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

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