CSSで画像に指定色の透過カラーを重ねる方法を現役エンジニアが解説【初心者向け】
初心者向けにCSSで画像に指定色の透過カラーを重ねる方法について解説しています。ここでは透明度を指定するopacityプロパティと疑似要素を使った方法について説明します。画面上の見え方を確認しましょう。
テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査
監修してくれたメンター
nakamoto
CSSで画像に指定色の透過カラーを重ねる方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。
CSSで指定色の透過カラーを重ねることができれば、画像自体をフォトショップなどで修正することなく、CSSの修正だけで表示を変更可能です。
実務でも画像に文字を表示したりする修正をする際に活用してみてください。
目次
そもそもCSSの記述方法がわからない場合は、 CSSの書き方について解説した記事を読むとさらに理解が深まります。
今回は、CSSに関する内容だね！
どういう内容でしょうか？
画像に指定色の透過カラーを重ねる方法について詳しく説明していくね！
お願いします！
画像に指定色の透過カラーを重ねる方法
色を透過させる場合にはCSSでopacityプロパティを使いましょう。
値は0〜1の間で指定をすることができ、0は透明、1は不透明になります。
画像に透過カラーを重ねる場合には、画像自体をopacityプロパティで半透明化させるために以下の方法などが考えられます。
- 背景の色を透過させるようにする
- 画像を設定した後に、擬似要素で文字通り後から半透過のカラーをかける
画像自体をopactiyプロパティで半透明化させるには、画像要素の親要素の背景に対してbackground-colorで色を設定し、その後に画像自体をCSSで半透明化させます。
擬似要素を使う場合には、beforeまたはafterを使用して画像要素にひもづく擬似要素を直接CSSに記述しましょう。
実際に書いてみよう
このテックアカデミーのロゴ画像に対して要素を変更していきます。
画像を半透明化する
HTMLサンプルコード
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
<title>HelloTechAcademy</title>
</head>
<body>
<div class="logo">
<img src="techmagazine.png" alt="オンラインプログラミングスクール">
</div>
</body>
</html>HTML解説
<!DOCTYPE html>では、HTMLを実装すると宣言しています。
<html lang=”ja”>では、HTMLの要素内で日本語を利用するという意味です。
<head>ではhead属性を開始しています。
<meta charset=”UTF-8″>ではmeta要素にUTF-8という文字コードを利用する指定をします。
<link rel=”stylesheet” href=”style.css”>では、style.cssファイルを読み込んでいます。
<title>HelloTechAcademy</title>では、ページのタイトルをHelloTechAcademyにしています。
</head>ではhead要素を終了しています。
<body>では、body要素を開始しています。
<div class=”logo”>では、logoというclassを用意しています。
<img src=”techmagazine.png” alt=”オンラインプログラミングスクール”>では、画像と、画像が表示されなかった場合に表示する名称を指定しています。
</div>では、logoというclassの範囲を終了しています。
</body>では、body要素を終了しています。
</html>では、HTMLを終了しています。
CSSサンプルコード
.logo{
background-color:blue;
display:inline-block;
}
.logo img{
opacity: 0.5;
display:block;
}CSS解説
.logo{では、logoというクラスのCSSを指定しています。
background-color:blue;では、logoの背景を青色にしています。
display:inline-block;では、背景指定と画像指定の表示位置を整えます。
display:inline-blockの指定をしないと横方向に青色背景が、logo画像からはみ出して表示されます。
}では、.logoの指定を終了しています。
.logo img{では、logoクラスにあるimgのCSS指定を開始します。
opacity: 0.5;では、opacityを0.5にすることで、背景を半透明化させます。
display:block;では、背景指定と画像指定の表示位置を整えます。
display:block;の指定をしないと縦方向に青色背景が、logo画像からはみ出して表示されます。
}では、.logo imgの指定を終了しています。
表示結果
テキストを透過カラーのかかった画像に重ねる方法
画像を半透明化させ、バックグラウンドの色が透過されている状態まで作成した場合には、文字などのテキストは擬似要素としてCSSに記述しましょう。
擬似要素は、完成された画像や要素にさらに追加する場合にはとても使いやすく、今回のように重ねて使う場合にはあとから追記しやすいため、非常に重宝します。
テキストを実際に画像に重ねて書いてみよう
HTMLサンプルコード
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
<title>HelloTechAcademy</title>
</head>
<body>
<div class="logo">
<img src="techmagazine.png" alt="オンラインプログラミングスクール">
</div>
</body>
</html>HTML解説
<!DOCTYPE html>では、HTMLを実装すると宣言しています。
<html lang=”ja”>では、HTMLの要素内で日本語を利用するという意味です。
<head>ではhead属性を開始しています。
<meta charset=”UTF-8″>ではmeta要素にUTF-8という文字コードを利用する指定をします。
<link rel=”stylesheet” href=”style.css”>では、style.cssファイルを読み込んでいます。
<title>HelloTechAcademy</title>では、ページのタイトルをHelloTechAcademyにしています。
</head>ではhead要素を終了しています。
<body>では、body要素を開始しています。
<div class=”logo”>では、logoというclassを用意しています。
<img src=”techmagazine.png” alt=”オンラインプログラミングスクール”>では、画像と、画像が表示されなかった場合に表示する名称を指定しています。
</div>では、logoというclassの範囲を終了しています。
</body>では、body要素を終了しています。
</html>では、HTMLを終了しています。
CSSサンプルコード
.logo{
background-color:blue;
display:inline-block;
}
.logo img{
opacity: 0.5;
display:block;
}
.logo::after{
content:"オンラインプログラミング";
position:absolute;
top:200px;
left:100px;
font-size:100px;
color:red;
}
CSS解説
.logo{では、logoというクラスのCSSを指定しています。
background-color:blue;では、logoの背景を青色にしています。
display:inline-block;では、背景指定と画像指定の表示位置を整えます。
display:inline-blockの指定をしないと横方向に青色背景が、logo画像からはみ出して表示されます。
}では、.logoの指定を終了しています。
.logo img{では、logoクラスにあるimgのCSS指定を開始します。
opacity: 0.5;では、opacityを0.5にすることで、背景を半透明化させます。
display:block;では、背景指定と画像指定の表示位置を整えます。
display:block;の指定をしないと縦方向に青色背景が、logo画像からはみ出して表示されます。
.logo::after{では、logo要素の終了タグの直後を、セレクタとして選択できます。
::after というオプションは、疑似要素と言います。
::というコロンを2つ記載しましたが、:というコロン1つでも動作します。
2つ記載したほうが目視で明確に判断できるというメリットがあります。
疑似要素については、before/afterの使い方 も参考にしてみてください。
content:”オンラインプログラミング”;では、オンラインプログラミングという文字列を表示させています。
position:absolute;では、contentの表示位置を画面の左端を基準にして、topやleftなどを利用して指定の位置に配置できます。
top:200px;では、contentの表示位置を画面の左端を基準にして、上から200pxの位置に指定します。
left:100px;では、contentの表示位置を画面の左端を基準にして、左から100pxの位置に指定します。
font-size:100px;では、contentの文字サイズを100pxで指定します。
color:red;では、contentの文字色を赤色で指定します。
}では、.logo::after{の指定を終了します。
表示結果
まとめ
本記事では、CSSで画像に透過カラーを重ねる方法とテキストを画像に重ねる方法について解説しました。
- 画像に指定色の透過カラーを重ねる方法
- テキストを透過カラーのかかった画像に重ねる方法
CSSのプロパティを理解することで、様々な画像・テキストの変更を行えるようになります。
CSSで画像に指定色の透過カラーを重ねる方法がよく分かったので良かったです！
ゆかりちゃん、今後も分からないことがあったら質問してね！
分かりました。ありがとうございます！
CSSを学習中の方へ
これで解説は終了です、お疲れさまでした。
- つまずかず「効率的に」学びたい
- 副業や転職後の「現場で使える」知識やスキルを身につけたい
CSSを学習していて、このように思ったことはありませんか？
テックアカデミーのWebデザインコースでは、第一線で活躍する「プロのWebデザイナー」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。
合格率10%の選考を通過した、選ばれたWebデザイナーの手厚いサポートを受けながら、オリジナルのWebサイト制作を学べます。
まずは一度、無料体験で学習の悩みや今後のキャリアについて話してみて、「現役Webデザイナーから教わること」を実感してみてください。
時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします！
