実際に書く！CSSで背景画像を透過させる方法【初心者向け】

CSSで背景画像を透過させる方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。

目次

• CSSで背景画像を透過させる方法とは
• opacityプロパティで透明度を指定する方法
• rgba()関数で透明度を指定する方法
• まとめ
• 執筆してくれたメンター
• CSSを学習中の方へ

そもそもCSSの記述方法がわからない場合は、 CSSの書き方について解説した記事を読むとさらに理解が深まります。

 

 

CSSで背景画像を透過させる方法とは

CSSで背景画像を透過させる方法は、以下の2つがあります。

• opacityプロパティで透明度を指定する方法
• rgba()関数で透明度を指定する方法

それぞれの方法について、順番に確認していきましょう。

 

opacityプロパティで透明度を指定する方法

セレクタすべてを透過させるプロパティに、opacityというものがあります。
opacityプロパティで透明度を指定したとき、文字入りのコンテンツの場合、文字まで薄くなってしまって、困ってしまったことはありませんか。
これは、セレクタすべてを透過するためです。

今回は、背景画像だけを透過させるようにするCSSを書いてみましょう。

 

まず、HTMLを用意します。

<div class="content">
    <div class="bg"></div>
    <p>たんぽぽ</p>
</div>

.bgは空のdivで、「たんぽぽ」はその外に書いてあります。

つまり、positionプロパティを使っていきます。

 

実際に書いてみよう

1. 各要素の配置方法やサイズなどを指定する
2. 背景に使用する画像や表示位置、透明度を指定する
3. 背景画像と文字列の重ね順を変更する

 

まず、相対位置(position: relative;)を、.contentに与えます。

.content{
    width: 200px;
    height: 150px;
    border : 1px solid #000;
    position: relative; /*相対位置*/
}

p{
    /*文字の装飾*/
    color: #f00;
    font-size : 30px;
    font-weight: bold;
    text-align: center;
}

 

次に、背景の設定をするのは、.bgとします。

width と height を 100% で設定し、position を絶対位置(absolute)として、左上(left:0; top: 0;)に配置します。

.bg{
    /*位置の設定*/
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;

    /*背景画像の設定*/
    background: url(https://dl.dropbox.com/s/28e21uby8b3eibo/sample.jpg?dl=0);
    background-size: cover;

    /*透過の設定*/
    opacity: 0.5;
}

 

これで完成・・・と思いきや。

このままだと、文字は透過している画像の下になってしまっています。

ですので、絶対位置に固定された背景画像よりも、pの内容が最前に来るようにしなければいけません。

 

そこで、pにも、position: absolute; を与えてあげることで、HTMLに書かれている通りの重ね順になります（position: absolute; としているので、z-indexを使って重ね順を操作することもできますね）。

ついでに、上下を中央寄せにしておきましょう。

p{
    width: 100%; /*absoluteで位置を設定するときに、幅と高さは必ず必要*/
    height: 1.5em;
    color: #f00;
    font-size : 30px;
    font-weight: bold;
    text-align: center;

    /*位置の設定 - 上下中央寄せ*/
    position: absolute;
    margin: auto;
    top: 0;
    bottom: 0;
}

 

これで、背景画像と文字の透過を区別することができました。

 

[PR] HTML/CSSで挫折しない学習方法を動画で公開中

rgba()関数で透明度を指定する方法

文字色や背景色など色を変更するとき、rgba()関数を使用することがあります。

rgba()関数は、rが赤（red）、gが緑（green）、bが青（blue）を表し、aが透明度（alpha）の4つの数値で対象の色を指定することができます。

rgbは、0～255の数値で指定し、aは、opacityと同じく0.0（透明）～1.0（不透明）の範囲で指定します。

では、rgba()関数を用いて背景画像を透過させるCSSを書いてみましょう。

 

まず、HTMLを用意します。

<div class="content">
    <div class="bg">
        <p>たんぽぽ</p>
    </div>
</div>

.bgのdivタグ内にpタグの「たんぽぽ」が入っています。

 

実際に書いてみよう

1. 各要素のサイズ、背景に使用する画像を指定する
2. 画像の透明度を指定する

 

まず、画像サイズや背景画像を.contentに、文字の大きさなどをpタグに与えます。

.content{
    width: 200px;
    height: 150px;
    border : 1px solid #000;
    /*背景画像の設定*/
    background-image: url(https://dl.dropbox.com/s/28e21uby8b3eibo/sample.jpg?dl=0);
    background-size: cover;
}

p{
    /*文字の装飾*/
    color: #f00;
    font-size : 30px;
    font-weight: bold;
}

 

では、背景画像に透明度を指定します。
また、文字を画像の上下中央に配置します。

.bg{
    height: 100%;
    background-color: rgba(255, 255, 255, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
}

 

これで背景画像が透過になり、文字も上下中央に配置されました。

 

まとめ

背景画像を透過にするには、以下の2つの方法を紹介しました。

• opacityプロパティで透明度を指定する方法
• rgba()関数で透明度を指定する方法

opacityプロパティでは、セレクタ全体の透明度を、rgba()関数では、文字色や背景色など色の変更ができる部分の透明度の指定ができましたね。

作成するWebページにおいてどの部分を透過にしたいのかを確認し、2つの方法を使い分けられるようにしていきましょう。

 

執筆してくれたメンター

和田 祥子（わださちこ） フリーランスのWebデザイナー7年目です。Ruby勉強中。テニスと音楽とビールが好きです。

 

 

CSSを学習中の方へ

これで解説は終了です、お疲れさまでした。

• つまずかず「効率的に」学びたい
• 副業や転職後の「現場で使える」知識やスキルを身につけたい

CSSを学習していて、このように思ったことはありませんか？

テックアカデミーのWebデザインコースでは、第一線で活躍する「プロのWebデザイナー」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。

合格率10%の選考を通過した、選ばれたWebデザイナーの手厚いサポートを受けながら、オリジナルのWebサイト制作を学べます。

まずは一度、無料体験で学習の悩みや今後のキャリアについて話してみて、「現役Webデザイナーから教わること」を実感してみてください。

時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします！