背景画像にグラデーションをかける方法

背景に画像とグラデーションが重なっているサイトを見ることがあると思います。

一見難しそうに見えますがCSSを知っていれば簡単に実装できます。今回は背景画像にグラデーションをかける方法の説明です。

background-colorとbackground-imageは両方指定できる

まず最初に思い出してほしいのは、backgroundプロパティで画像(image)と色(color)は両方指定可能だということです。

しかしimageはcolorの上に重なるので、透過させた画像を使う必要があります。そうじゃないと画像しか見えませんからね。

透過処理したpng画像を使う。linear-gradientradial-gradientなどグラデーションをbackground-imageに使うなら、transparent(透明)を含んだ指定にします。

とりあえずやってみましょう。

colorにはtomato。 imageにはlinear-gradinetを使います。linear-gradientは半分透明になるようにしています。
別々に表示すると、これとこれですね。

 
 

1つのブロックに両方指定します。

 

ここまでは「背景画像と背景色は重ねて利用できる」ことの復習です。

疑似要素の背景も重ねる

今回作ろうとしているのは背景画像の上にグラデーションですが、グラデーションだけをかけるより背景色混ぜた方がそれっぽくなるので、「背景画像 の上に 背景色 の上に 背景画像(グラデーション)を作ります。イメージ化するとこうなります。

 
 
 

z-indexの項目で説明しましたが、疑似要素は元の要素の上に重なりますので、

  • 本体要素に背景画像を指定
  • 疑似要素に背景色・背景グラデーションを指定

という順に設定してやればOKです。(疑似要素にz-index:-1;を指定して背景設定を逆にしても出来ますが、cssが長くなるので個人的には好みでないです)

疑似要素って何?という方は「疑似要素before after」をご参照ください。

先程、背景画像(今回でいえばgradient)だけ透過していましたが、今回は背景色も透過させておかねばなりません。
なぜなら、さらに下に背景画像があるから。色の透過はrgba値の指定が必要です。

必要になる知識は疑似要素グラデーションだけなので、その2つを理解していれば出来るはずです。サンプルとcssだけ表示しておきます。疑似要素、-gradientがいまいち分かってなくて、、という方はサンプル下のリンクからおすすみください。

 
div{
 background-image: url(背景画像URL);
 position: relative;
 }
div:before {
 content: "";
 display: block;
 width: 100%;
 height: 100%;
 background-color: rgba(255,200,200,.6);
 background-image: radial-gradient(at top,transparent 40%,khaki);
 position: absolute;
 top: 0;
 left: 0;
}

注意点

たとえば、サンプルの元要素にテキストボックスを置きたいとします。
背景があるので、白色背景を設定することにします。

<div>
  <p>サンプルテキスト</p>
</div>
p{
  width: max-content;
  background-color: #fff;
  margin: auto;
  padding: 2.0rem;
}

しかし、これだけだと背景が上にかぶさりテキストまでぼやけます

サンプルテキスト

position指定した要素(今回は疑似要素)はz-indexを指定していなくても他の兄弟要素の上になります。floatよりも上にきます。

なので解決策としては、pタグにもpositionを設定してやるのが一番早いです。

p{
 position: relative;
}

サンプルテキスト

さらに注意点

こちらもz-indexに書いた内容ですが、htmlの基本として「後から書いたものが上に重なり」ます。

今回、疑似要素を:beforeで作っているのでpタグは疑似要素の後ろという扱いですが、もし疑似要素を:afterにした場合は、疑似要素がpタグの上に重なってしまいます(z-indexで上下指定は可能)。注意しましょう。

23:40まで受講できるから、仕事と両立できるHTML5/CSS3コース[オンライン]