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

CSSで背景画像を透過させる方法について解説します。CSSで透過させるにはopacityというプロパティを使用します。

CSSについてそもそもよく分からないという方は、CSSの書き方について解説した記事をまずご覧ください。

 

なお本記事は、TechAcademyのWebデザインオンラインブートキャンプのカリキュラムをもとに執筆しています。

 

透過させるプロパティに、opactyというものがあります。

ただ、単純にこれを使用して文字入りのコンテンツを作成すると、文字まで薄くなってしまって、困ってしまったことはありませんか。

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

まず、HTMLを用意します。

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

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

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

 

実際に書いてみよう

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

透過しているのがわかりやすいように、真っ黒の背景色をつけておきます。

.content{
    width: 200px;
    height: 150px;
    background: #000;

    position: relative; /*相対位置*/
}

p{
    /*文字の装飾*/
    color: #fff;
    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: #fff;
    font-weight: bold;
    text-align: center;

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

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

 

この記事を監修してくれた方 和田 祥子（わださちこ） フリーランスのWebデザイナー7年目です。Ruby勉強中。 テニスと音楽とビールが好きです。

 

オンラインのプログラミングスクールTechAcademyでは初心者でも最短4週間でオリジナルWebサイトを公開できるWebデザインオンラインブートキャンプを開催しています。

現役エンジニアがパーソナルメンターとして受講生に1人ずつつき、マンツーマンのメンタリングで学習をサポートし、最短4週間で習得することが可能です。

また、現役エンジニアから学べる無料のプログラミング体験会も実施しているので、ぜひ参加してみてください。