CSS

CSSで背景にグラデーションと画像を同時に指定する


久々に仕事でCSSのグラデーション+アイコン画像というボタンを作る機会があって、ふと気づいたんですよね。
やり方が思い出せない/(^o^)\
たしか3年くらい前にもすんなりいかなくて調べてた気が…
同じことを繰り返すのも不毛なので、ポイントをまとめておくことにしました。

背景色と画像の複数表示

通常、ベタ塗りの背景色と画像を同時に表示する場合は、

みたいな感じですよね。

画像と画像を重ねて表示したいときは、

というふうにカンマ区切りで指定して、そのほかのプロパティについても

とするとそれぞれの画像に対して別々の値を適用することができます。

CSSのグラデーションは画像扱い?

さて、グラデーションの場合はどうするかというと、実際のソースはこんな感じ。

1行目はグラデーションに対応してないブラウザ用に、単純に背景色と画像のみの指定。
2行目3行目はベンダープレフィックス付き。これは必要に応じてつけたり外したりしてください。
4行目~6行目は、画像とグラデーションに対する各プロパティの指定です。

見てわかるとおり、グラデーションを背景に指定する場合は、画像と同じように扱います。

ところでグラデーション作るのめんどくさい方はジェネレータを使うと便利ですよ。

diagonalのときに角度が入力できるともっといいのですが…

これはグラデーション特化ですが、これ以外にもほかのプロパティを作成できるジェネレータもあります。

こんなんselectポチポチするくらいなら自分で書いた方が早いですね…

アニメーションなんかもこういうの使えば便利です。

個人的にはベンダープレフィクス付きでコピペできることの恩恵の方が大きいと思っています。
Autoprefixerの時代なのでもうあまり気にならない方もいると思うのですが、今のプロジェクトにAutoprefixer導入できないとか、Android2.3まで対応しないといけないとか、いろいろ事情ある場合には結局デザイナーやコーダーが地道にがんばるしかないので、こういうジェネレータの需要はまだまだありそうです。

スポンサードリンク

菜摘

Web制作がメインですがときどきフライヤーデザインやCDラベルなどDTP系もやってます。 デザイナーだったはずがhtml/cssコーディングに目覚めた。 黒い画面は相変わらず怖い。 javascriptはこのごろちょっと頑張ってるよ。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です