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

opacityの1

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

opacityの0.8

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

opacityの0.6

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

opacityの0.4

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

opacityの0.2

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

opacityの0

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

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

関連の記事

CSS box-shadow ボックスに影をつけるサンプル
CSS text-shadow 文字に影をつけるサンプル

△上に戻る