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

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

そもそもCSSについてよく分からないという方は、CSSの書き方について解説した記事を読むとさらに理解が深まります。

 

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

 

透過させるプロパティに、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勉強中。 テニスと音楽とビールが好きです。

 

CSSを学習中の方へ

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

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

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

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

合格率10%の選考を通過した、選ばれたWebデザイナーの手厚いサポートを受けながら、オリジナルのWebサイト制作を完全オンラインでしっかり習得できます。

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

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