CSSで画像に指定色の透過カラーを重ねる方法を現役エンジニアが解説【初心者向け】

初心者向けにCSSで画像に指定色の透過カラーを重ねる方法について解説しています。ここでは透明度を指定するopacityプロパティと疑似要素を使った方法について説明します。画面上の見え方を確認しましょう。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,000以上あります。

CSSで画像に指定色の透過カラーを重ねる方法について、TechAcademyのメンター(現役エンジニア)が実際のコードを使用して初心者向けに解説します。

 

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

 

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

 

田島悠介

今回は、CSSに関する内容だね!

大石ゆかり

どういう内容でしょうか?

田島悠介

画像に指定色の透過カラーを重ねる方法について詳しく説明していくね!

大石ゆかり

お願いします!

 

画像に指定色の透過カラーを重ねる方法

色を透過させる場合にはCSSでopacityプロパティを使いましょう。

値は0〜1の間で指定をすることができ、0は透明、1は不透明となります。

画像に透過カラーを重ねる場合には、画像自体をopcityプロパティで半透明化させ、

  • 背景の色が透過させるようにする
  • 画像を設定した後に擬似要素で文字通り後から半透過のカラーをかける

などの方法などが考えられます。

画像自体をopctiyプロパティで半透明化させるには、画像要素の親要素の背景に対してbackground-colorで色を設定し、その後に画像自体をCSSで半透明化させます。

擬似要素を使う場合には、beforeまたはafterを使用して画像要素に紐づく擬似要素を直接CSSに記述しましょう。

 

実際に書いてみよう

このりんごの画像に対して要素を変更していきます。

(HTMLファイル)

    <p class="apple">

        <img src="image/apple.jpg">

    </p>

 

(CSSファイル)画像を半透明化

.apple{

    background-color: blue;

    display:inline-block;

}

.apple img{

    opacity: 0.5;

    display:block;

}

(CSSファイル)背景を後から半透明化

.apple::after{

    content: '';

    position: absolute;

    top: 0;

    right: 0;

    bottom: 0;

    left: 0;

    background-color: blue;

    opacity: 0.5;

    display:block

}

 

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

おまけ:テキストを透過カラーのかかった画像に重ねる方法

画像を半透明化させバックグラウンドの色が透過されている状態まで作成した場合には、文字などのテキストは擬似要素としてCSSに記述しましょう。

擬似要素は完成された画像や要素にさらに追加する場合にはとても使いやすく、今回のように重ねて使う場合にはあとから追記しやすいため、非常に重宝します。

こちらも今回はbeforeまたはafterのどちらでも利用が可能です。

 

実際に書いてみよう

(HTMLファイル)

    <p class="apple">

        <img src="image/apple.jpg">

    </p>

 

(CSSファイル)画像を半透明化

.apple{

    background-color: blue;

    display:inline-block;

}

.apple img{

    opacity: 0.5;

    display:block;

}

.apple:after{

    content: "りんご";

    position: absolute;

    top: 200px;

    left: 100px;

    font-size: 100px;

    color:red;

}

 

執筆してくれたメンター

木村勇土

TechAcademyの現役メンター。

現在は行政書士事務所を運営しており、お客様にはプログラマーやフリーランサーも多い。

WordPressを中心とした自社のWebサイトの修正などを行なっている。

 

大石ゆかり

CSSで画像に指定色の透過カラーを重ねる方法がよく分かったので良かったです!

田島悠介

ゆかりちゃん、今後も分からないことがあったら質問してね!

大石ゆかり

分かりました。ありがとうございます!

 

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

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