概要へ移動

簡単な例。

CSS : 「border」の例
.sample {

    opacity: 0.3;

}
HTML : 適用するHTML
<div class="sample">sample</div>
実行結果
sample

このページで解説するコードの実行結果。

実行結果
0
0.1
0.2
0.3
0.4
0.5
0.6
0.7
0.8
0.9
1

なお、見た目のため、このページの実行結果には「下のCSSコードも」適用している。

CSS : デフォルトCSS
div {

    background-color:   navy;           /*  背景色 */

    color:              yellow;         /*  文字の色 */

    margin:             5px;            /*  外側の余白 */

    padding:            5px;            /*  内側の余白 */

    border:             2px solid blue; /*  境界線 */

    font-size:          1.5em;          /*  文字の大きさ */

}

opacityの概要

「0」～「1」の間の数値で指定する。

（表） opacityの設定値
設定値機能デフォルト
0完全な透明（見えない）
0.5半透明
1完全な不透明○

まず、opacityの設定が無い場合の結果。（デフォルト値の1と同じ結果）

HTML : 適用するHTML
    <div class="sample0"> 0   </div>

    <div class="sample1"> 0.1 </div>

    <div class="sample2"> 0.2 </div>

    <div class="sample3"> 0.3 </div>

    <div class="sample4"> 0.4 </div>

    <div class="sample5"> 0.5 </div>

    <div class="sample6"> 0.6 </div>

    <div class="sample7"> 0.7 </div>

    <div class="sample8"> 0.8 </div>

    <div class="sample9"> 0.9 </div>

    <div class="sample10">1   </div>
実行結果
0
0.1
0.2
0.3
0.4
0.5
0.6
0.7
0.8
0.9
1

opacityを適用する。

CSS : 一覧
.sample0  { opacity: 0;  }

.sample1  { opacity: 0.1;  }

.sample2  { opacity: 0.2;  }

.sample3  { opacity: 0.3;  }

.sample4  { opacity: 0.4;  }

.sample5  { opacity: 0.5;  }

.sample6  { opacity: 0.6;  }

.sample7  { opacity: 0.7;  }

.sample8  { opacity: 0.8;  }

.sample9  { opacity: 0.9;  }

.sample10 { opacity: 1;  }
実行結果
0
0.1
0.2
0.3
0.4
0.5
0.6
0.7
0.8
0.9
1

Emmet : op

記述Visual Studio Code
opopacity: ;