※当サイトではアフィリエイト広告を利用しています

HTML / CSS

【2パターン紹介】画像にCSSでオーバーレイをつける方法

 
【2パターン紹介】画像にオーバーレイをつける方法

オーバーレイを画像に重ねることってありますよね。

画像の上にテキストを配置する場合、可読性を維持するため
画像とテキストの色のコントラストを保つために必要になったりします。

See the Pen
by notebook (@orange-notebook)
on CodePen.


今回はこのパグの画像に、
黒いオーバーレイをつける方法を2種類ご紹介したいと思います。

クリックできる目次

1つ目：backgroundプロパティに画像とオーバーレイを同時設定する

1つ目はbackgroundプロパティに
linear-gradient + 背景用の画像URLを組み合わせて指定する方法です。

こんなサンプルを作ってみました。
黒の透明度60%のオーバーレイになっています。

See the Pen
by notebook (@orange-notebook)
on CodePen.


またオーバーレイは半透明にする必要があるため、
linear-gradientの値は、透過できるrgba(red, green, blue, alpha)で表します。

HTML

HTMLはdivのみでOKです。

<div></div>

CSS

CSSの全体像はこんなかんじになっています。CSSを当てるのも、divタグのみです。

* {
  margin: 0;
}

div {
  /* オーバーレイの高さを指定 */
  height: 100vh;  
  /* オーバーレイの色と画像の指定 */
  background: linear-gradient(rgba(0, 0, 0, .6),  rgba(0, 0, 0, .6)),  url("https://picsum.photos/id/1062/500/400"); 
  /* 画像の位置やサイズの調整 */
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

 

*(ユニバーサルセレクタ)に関しては、
「margin: 0;」を指定することで、余白を除外しています。

1：コンテンツの高さを確保する

コンテンツがないと高さが出ないので、heightを設定して高さを確保します。

div {
  /* オーバーレイの高さを指定 */
  height: 100vh;
}

 

2：backgroundにオーバーレイと画像URLを指定する

そしてbackgroundプロパティに、
linear-gradientと画像のURLをカンマで分けて記載します。

順番は最初に「inear-gradient」、2番目に「画像URL」です。

div {
  /* オーバーレイの色と画像の指定 */
  background: linear-gradient(rgba(0, 0, 0, .6),  rgba(0, 0, 0, .6)),  url("画像URL"); 
}

順番を逆にすると、オーバーレイが見えなくなってしまうので注意です。

3：画像のサイズ、位置、リピートなどの設定をする

最後に画像を調整するため、サイズ、位置、リーピートなどの詳細情報をbackgroundプロパティで設定します。

今回は下記のプロパティを使用しました。

  • background-size
  • background-repeat
  • background-position
div {
  /* 画像の位置やサイズの調整 */
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

 

これで完成です！

この方法は、1つのプロパティでほぼ一気に指定が済んでしまうので楽ですね。

2つ目：擬似要素::beforeか::afterでオーバーレイを作る

2つ目のやり方は、
「::before」もしくは「::after」のCSS擬似要素を使い、オーバーレイを作る方法です。

1つ目と見た目は同じサンプルを作りました。

See the Pen
by notebook (@orange-notebook)
on CodePen.

1つ目の方法では、画像とオーバーレイを同時に設定していましたが、
今回は背景画像→divタグ、オーバーレイ→CSS擬似要素で分けて実装していきます。

HTML

こちらもHTMLはdivのみでOKです。

<div></div>

CSS

CSSの全体像はこんなかんじになっています。

* {
  margin: 0;
}

div {
  /* オーバーレイの高さを指定 */
  height: 100vh;
  /* 背景画像を指定 */
  background: url("https://picsum.photos/id/1062/500/400");
  /* 画像の調整 */
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  /* オーバーレイの位置調整のためのpositionを指定 */
  position: relative;
}

div::before {
  /* contentプロパティは必須 */
  content: "";
  /* divを起点に位置を調整する */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* オーバーレイを作成 */
  background: linear-gradient(rgba(0, 0, 0, .6),  rgba(0, 0, 0, .6));
}

 

今回はdivと、擬似要素::beforeにCSSを当てていきます。

1：コンテンツの高さを確保する

先ほどと同様コンテンツがないと高さが出ないので、divタグに「height」を指定して高さを確保します。

div {
  /* オーバーレイの高さを指定 */
  height: 100vh;
}

 

2：backgroundプロパティで背景画像のURLを指定する

divタグにbackgroundプロパティで背景画像の設定をしていきます。

div {
  /* 背景画像を指定 */
  background: url("画像URL");
}

 

3：位置調整のための「position」プロパティを指定する

今回は「::before」に「position: absolute;」を使って位置を指定します。
divタグを位置の基準とするために「position:relative」を指定しておきます。

div {
  /* オーバーレイの位置調整のためのpositionを指定 */
  position: relative;
}

 

これでdivタグに対する設定は終わりです！

4：擬似要素「::before」にオーバーレイを指定する

今度は「::before」に下記プロパティを指定して、オーバーレイを作ります。

div::before {
  /* contentプロパティは必須 */
  content: "";
  /* divを起点に位置を調整する */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* オーバーレイを作成 */
  background: linear-gradient(rgba(0, 0, 0, .6),  rgba(0, 0, 0, .6));
}

 

まず「::before」を使うときに必要な「content」プロパティの値を「空」指定します。

div::before {
  /* contentプロパティは必須 */
  content: "";
}

contentプロパティは値が空でも指定が必要なプロパティです。

次にdivタグと同じ大きさでオーバーレイをかぶせたいので、
「position: absolute;」に「top: 0;」「left: 0;」「width: 100%」「height: 100%;」
で、divタグと同じ大きさいっぱいに広げます。

div::before {
  /* divを起点に位置を調整する */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

 

最後にbackgroundプロパティにlinear-gradientで色を指定します。

div::before {
  /* オーバーレイを作成 */
  background: linear-gradient(rgba(0, 0, 0, .6),  rgba(0, 0, 0, .6));
}

 

おわりに

いかがでしたでしょうか。
オーバーレイは何かと使う機会が多いですよね。

また今回使ったパグの画像ですが「Lorem Picsum」というサービスを使用しました。
使い方をこちらの記事にまとめているので、気になった方はのぞいてみてください。

【画像準備とさよなら】Lorem Picsumの使いかた
【画像準備とさよなら】Lorem Picsumの使い方【便利サービス】練習でサイトや部分的なパーツを作ったり、チュートリアルにそってコーディングしたりするとき、画像の準備がすこし面倒だなと感じてしまうことってありませんか？ 練習で画像そのものにこだわりがないときなんか特に。。 そんなとき力強い味方になってくれる「Lorem Picsum」という便利なサービスを紹介したいと思います。...

最後までお読みいただき、ありがとうございました。

【CSS】要素をど真ん中に配置する方法【3選】
【CSS】要素をど真ん中に配置する方法【3つ紹介】要素をど真ん中に配置したいことってありますよね。 ヒーローイメージでも文章などのコンテンツが、ど真ん中に配置されていることも多いのではないでしょうか。 今回は要素を縦にも横にも真ん中に配置する方法を2つ挙げたいと思います。 1.display: flex;を使った方法 2.position: absolute;を使った方法 ではそれぞれもう少し詳しく見ていきましょう。...
【box-shadow】内側の影inset / 複数の影の指定方法
【box-shadow】内側の影inset / 複数の影の指定方法影をつけるCSSプロパティのbox-shadowですが、 insetで内側に影をつけることができたり、 カンマで区切ると複数の影を作ることもできます。 今回はinsetの挙動と、複数の影のつけかたについてまとめてみたいと思います。...
関連する記事