CSSでグラデーションと画像を一緒に使う方法

CSS3のgradientを使用してグラデーションをつけつつ、同じ要素に画像も指定したい場合があります。

例えば、このようなボタンを作る場合、特にスマートフォンのボタンを作成する場合に、つまずく部分があったので作成方法をまとめておきたいと思います。
今回は、スマートフォンに対応したボタンを作成する方法を見ていきます。

のようなソースに、pタグにグラデーションと背景をのせる方法をご紹介します。

まずは、背景のCSSを用意します。

ジェネレーターのUltimate CSS Gradient Generatorを利用すると簡単です。


次に画像のCSSを用意します。


次に画像のサイズを指定します

スマートフォンの場合、Retinaディスプレイに対応させる必要がありますので、画像のサイズを半分にして作成する必要があります。
画像のサイズが40pxなので、半分の20pxに指定します。


これらを一つの要素に適応すると

完成形はこちらのようなソースになります。


ポイントは、2つ

  • CSSの書く順番が決まっている
  • グラデーションに100%のサイズを与える

background: 画像,グラデーション;
background-size: 画像のサイズ,グラデーションのサイズ

カンマで区切ってそれぞれを指定してあげるということが重要です。

グラデーションのサイズを指定しないと

グラデーションのサイズを指定しないとこのようになってしまいます。このようになってハマル場合があるので、その時は指定を忘れているということですね。

スマートフォンサイトにおいてCSSでボタンを作成することは非常に多いですが、これで安心ですね!