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

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

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

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

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

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

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

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

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

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

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

cssでは、

div{
  background-color: tomato;
  background-image: linear-gradient(to top,navy 10% 20%,transparent);
}

ショートハンドで書くなら、

div{
  background: linear-gradient(略) tomato ;
}

のように、[image] [color] を空白区切りで書きます。

疑似要素の背景も重ねる

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

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

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

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

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

必要になる知識は疑似要素とグラデーションだけなので、その２つを理解していれば出来るはずです。

以下にサンプルとそのcssだけ表示しておきます。

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 class="hasBackground">
  <p>サンプルテキスト</p>
</div>

p{
  background-color: #fff;
  margin: auto;
  padding: 2.0rem;
}

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

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

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

p{
 position: relative;
}

さらに注意点

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

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