CSS | opacity | 不透明度

opacityは不透明度を指定するためのCSSプロパティです。

opacityプロパティは1から0の間で指定します。 opacityを1から0に0.1刻みで減らしていった結果を示します。

HTML


<div class="sample op1_0">1.0</div>
<div class="sample op0_9">0.9</div>
<div class="sample op0_8">0.8</div>
<div class="sample op0_7">0.7</div>
<div class="sample op0_6">0.6</div><br>
<div class="sample op0_5">0.5</div>
<div class="sample op0_4">0.4</div>
<div class="sample op0_3">0.3</div>
<div class="sample op0_2">0.2</div>
<div class="sample op0_1">0.1</div>
<div class="sample op0_0">0.0</div>

CSS


.op1_0 { opacity: 1; }
.op0_9 { opacity: 0.9; }
.op0_8 { opacity: 0.8; }
.op0_7 { opacity: 0.7; }
.op0_6 { opacity: 0.6; }
.op0_5 { opacity: 0.5; }
.op0_4 { opacity: 0.4; }
.op0_3 { opacity: 0.3; }
.op0_2 { opacity: 0.2; }
.op0_1 { opacity: 0.1; }
.op0_0 { opacity: 0; }


.sample {
    color:   white;         /* 文字の色 */
    background-color: navy; /* 背景 */
    margin:  2px;           /* 外側の余白 */
    padding: 5px 10px;      /* 内側の余白 */
    display: inline-block;  /* インライン・ブロック要素 */
    font-size: 1.5rem;      /* 文字の大きさ */
}

実行結果opacityを1から0に

1.0

0.9

0.8

0.7

0.6

0.5

0.4

0.3

0.2

0.1

0.0

.sampleクラスを持つ<div>要素を準備します。

HTML


<div class="sample">■ sample ■</div>

CSS


.sample {
    color:   black;        /* 文字の色 */
    background-color: orange;
                           /* 背景 */
    padding: 5px 10px;     /* 内側の余白 */
    display: inline-block; /* インライン・ブロック要素 */
    font-size: 2rem;       /* 文字の大きさ */
}

実行結果初期状態

■ sample ■

.sampleクラスにopacityを指定します。0.75、0.5、0.25を指定した場合の例を示します。

HTML


<div class="sample">■ sample ■</div>

CSS


.sample {
    color:   black;        /* 文字の色 */
    background-color: orange;
                           /* 背景 */
    padding: 5px 10px;     /* 内側の余白 */
    display: inline-block; /* インライン・ブロック要素 */
    font-size: 2rem;       /* 文字の大きさ */
}

CSS


.sample {
    opacity: 0.75;
}

実行結果0.75

■ sample ■

HTML


<div class="sample">■ sample ■</div>

CSS


.sample {
    color:   black;        /* 文字の色 */
    background-color: orange;
                           /* 背景 */
    padding: 5px 10px;     /* 内側の余白 */
    display: inline-block; /* インライン・ブロック要素 */
    font-size: 2rem;       /* 文字の大きさ */
}

CSS


.sample {
    opacity: 0.5;
}

実行結果0.5

■ sample ■

HTML


<div class="sample">■ sample ■</div>

CSS


.sample {
    color:   black;        /* 文字の色 */
    background-color: orange;
                           /* 背景 */
    padding: 5px 10px;     /* 内側の余白 */
    display: inline-block; /* インライン・ブロック要素 */
    font-size: 2rem;       /* 文字の大きさ */
}

CSS


.sample {
    opacity: 0.25;
}

実行結果0.25

■ sample ■

.sampleクラスにopacity: 0を指定すると完全な透明になって見えなくなります。 1はデフォルト値であり、完全な不透明です。

HTML


<div class="sample">■ sample ■</div>

CSS


.sample {
    color:   black;        /* 文字の色 */
    background-color: orange;
                           /* 背景 */
    padding: 5px 10px;     /* 内側の余白 */
    display: inline-block; /* インライン・ブロック要素 */
    font-size: 2rem;       /* 文字の大きさ */
}

CSS


.sample {
    opacity: 0;
}

実行結果0

■ sample ■

HTML


<div class="sample">■ sample ■</div>

CSS


.sample {
    color:   black;        /* 文字の色 */
    background-color: orange;
                           /* 背景 */
    padding: 5px 10px;     /* 内側の余白 */
    display: inline-block; /* インライン・ブロック要素 */
    font-size: 2rem;       /* 文字の大きさ */
}

CSS


.sample {
    opacity: 1;
}

実行結果1

■ sample ■

親要素を透明にする場合

親要素を透明にすると子要素も透明になるので注意してください。

親子関係のある要素を準備します。親要素.parentにopacity: 0.3を指定すると子要素.childも半透明になります。

HTML


<div class="parent">
    parent<br>
    <div class="child">
        ■ child ■
    </div>
</div>

CSS


.parent {
    color: white;           /* 文字の色 */
    background-color: blue; /* 背景 */
}
.child {
    color: black;
    background-color: lightblue;
}
div {
    padding: 20px;         /* 内側の余白 */
    display: inline-block; /* インライン・ブロック要素 */
    font-size: 2rem;       /* 文字の大きさ */
}

実行結果初期状態

parent

■ child ■

HTML


<div class="parent">
    parent<br>
    <div class="child">
        ■ child ■
    </div>
</div>

CSS


.parent {
    color: white;           /* 文字の色 */
    background-color: blue; /* 背景 */
}
.child {
    color: black;
    background-color: lightblue;
}
div {
    padding: 20px;         /* 内側の余白 */
    display: inline-block; /* インライン・ブロック要素 */
    font-size: 2rem;       /* 文字の大きさ */
}

CSS


.parent {
    opacity: 0.3;
}

実行結果初期状態

parent

■ child ■

半透明な背景色を指定

opacityを使うと文字まで半透明になり読みにくくなります。これを避けるには、背景色をrgba()やhsla()で指定する方法があります。

`rgba()`

rgb()で指定するには( 赤, 緑, 青 )で指定します。たとえばorangeの場合はrgb( 255, 165, 0 )になります。 ※ RGB値やHSL値の計算はfromkato.comでできます。

HTML


<div class="sample">■ sample ■</div>

CSS


.sample {
    color:   black;        /* 文字の色 */
    background-color: orange;
                           /* 背景 */
    padding: 5px 10px;     /* 内側の余白 */
    display: inline-block; /* インライン・ブロック要素 */
    font-size: 2rem;       /* 文字の大きさ */
}

CSS


.sample {
    background-color:
        rgb( 255, 165, 0 );
}

実行結果rgb( 255, 165, 0 )

■ sample ■

これに色の透明度であるアルファ値を加えたrgba()で色を指定します。

アルファ値は1から0の間で指定します。アルファ値を0.7、0.4、0.1に設定した例を示します。

HTML


<div class="sample">■ sample ■</div>

CSS


.sample {
    color:   black;        /* 文字の色 */
    background-color: orange;
                           /* 背景 */
    padding: 5px 10px;     /* 内側の余白 */
    display: inline-block; /* インライン・ブロック要素 */
    font-size: 2rem;       /* 文字の大きさ */
}

CSS


.sample {
    background-color:
        rgba( 255, 165, 0, 0.7 );
}

実行結果rgba( 255, 165, 0, 0.7 )

■ sample ■

HTML


<div class="sample">■ sample ■</div>

CSS


.sample {
    color:   black;        /* 文字の色 */
    background-color: orange;
                           /* 背景 */
    padding: 5px 10px;     /* 内側の余白 */
    display: inline-block; /* インライン・ブロック要素 */
    font-size: 2rem;       /* 文字の大きさ */
}

CSS


.sample {
    background-color:
        rgba( 255, 165, 0, 0.4 );
}

実行結果rgba( 255, 165, 0, 0.4 )

■ sample ■

HTML


<div class="sample">■ sample ■</div>

CSS


.sample {
    color:   black;        /* 文字の色 */
    background-color: orange;
                           /* 背景 */
    padding: 5px 10px;     /* 内側の余白 */
    display: inline-block; /* インライン・ブロック要素 */
    font-size: 2rem;       /* 文字の大きさ */
}

CSS


.sample {
    background-color:
        rgba( 255, 165, 0, 0.1 );
}

実行結果rgba( 255, 165, 0, 0.1 )

■ sample ■

このようにrgba()を使うと文字は濃いまま、背景色だけを半透明にすることができます。

`hsla()`

hsl()で指定するには( 色相, 彩度, 明度 )で指定します。orangeの場合はhsl( 39, 100, 50 )になります。 ※ RGB値やHSL値の計算はfromkato.comでできます。

これにアルファ値を加えてhsla()で背景色を指定します。アルファ値を0.7、0.4、0.1に設定した例を示します。

HTML


<div class="sample">■ sample ■</div>

CSS


.sample {
    color:   black;        /* 文字の色 */
    background-color: orange;
                           /* 背景 */
    padding: 5px 10px;     /* 内側の余白 */
    display: inline-block; /* インライン・ブロック要素 */
    font-size: 2rem;       /* 文字の大きさ */
}

CSS


.sample {
    background-color:
        rgba( 255, 165, 0, 0.7 );
}

実行結果hsla( 39, 100, 50, 0.7 )

■ sample ■

HTML


<div class="sample">■ sample ■</div>

CSS


.sample {
    color:   black;        /* 文字の色 */
    background-color: orange;
                           /* 背景 */
    padding: 5px 10px;     /* 内側の余白 */
    display: inline-block; /* インライン・ブロック要素 */
    font-size: 2rem;       /* 文字の大きさ */
}

CSS


.sample {
    background-color:
        rgba( 255, 165, 0, 0.4 );
}

実行結果hsla( 39, 100, 50, 0.4 )

■ sample ■

HTML


<div class="sample">■ sample ■</div>

CSS


.sample {
    color:   black;        /* 文字の色 */
    background-color: orange;
                           /* 背景 */
    padding: 5px 10px;     /* 内側の余白 */
    display: inline-block; /* インライン・ブロック要素 */
    font-size: 2rem;       /* 文字の大きさ */
}

CSS


.sample {
    background-color:
        rgba( 255, 165, 0, 0.1 );
}

実行結果hsla( 39, 100, 50, 0.1 )

■ sample ■