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が透明の値です。

関連の記事

CSS background 背景色を指定するサンプル
CSS background-image 背景画像を指定する
CSS background-repeat 背景画像の繰り返しを指定
CSS border-radius 四角の角を丸くするサンプル
CSS box-shadow ボックスに影をつけるサンプル
CSS text-shadow 文字に影をつけるサンプル
CSS linear-gradient 線のグラデーションのサンプル
CSS3 円のグラデーションのサンプル(radial-gradient)

△上に戻る