@ CSS

opacity プロパティ

opacity プロパティは要素の透明度(アルファ値)を定義します。

透明度は、0.0(完全に透明)~1.0(完全に不透明)の数値で指定します。

format

/* 完全に不透明 */
opacity: 1;
opacity: 1.0;
opacity: .0;
  
/* 半透明 */
opacity: 0.6;
opacity: .6;
  
/* 完全に透明 */
opacity: 0.0;
opacity: 0;
  

コンテナ要素に指定した場合には、その内容にも透明効果が適用されます。

property_opacity_01

<style>
div { background-color: yellow; }
.opac1 { opacity: 0.1; }
.opac2 { opacity: 0.2; }
.opac3 { opacity: 0.3; }
.opac4 { opacity: 0.4; }
.opac5 { opacity: 0.5; }
.opac6 { opacity: 0.6; }
.opac7 { opacity: 0.7; }
.opac8 { opacity: 0.8; }
.opac9 { opacity: 0.9; }
.opac10 { opacity: 1.0; }
</style>

<div class="opac1">opacity: 0.1</div>
<div class="opac2">opacity: 0.2</div>
<div class="opac3">opacity: 0.3</div>
<div class="opac4">opacity: 0.4</div>
<div class="opac5">opacity: 0.5</div>
<div class="opac6">opacity: 0.6</div>
<div class="opac7">opacity: 0.7</div>
<div class="opac8">opacity: 0.8</div>
<div class="opac9">opacity: 0.9</div>
<div class="opac10">opacity: 1.0</div>

範囲外の値での透明度の指定も有効ですが、近い方の限界値におさめられます。

property_opacity_02

<style>
div { background-color: yellow; }
.opac-05 { opacity: -0.5; }
.opac0 { opacity: 0.0; }
.opac10 { opacity: 1.0; }
.opac15 { opacity: 1.5; }
</style>

<div class="opac-05">opacity: -0.5</div>
<div class="opac0">opacity: 0.0</div>
<div class="opac10">opacity: 1.0</div>
<div class="opac15">opacity: 1.5</div>

demo