CSS3でグラデと背景画像を一括指定

CSS3で背景にグラデーションが指定できるようになり、グラデーションの指定方法についてはいろいろ紹介されているけど、背景画像と組み合わせた指定方法がわからなかったので調べてみた。
指定方法の概要がわかりやすいよう-moz-とか-webkit-等のベンダープレフィックスは省略してます。

通常の背景の一括指定

.hoge{background:url(背景画像のURL) 開始位置 繰返指定 背景色;}

グラデーションのみの指定

.hoge {background:gradient(グラデの指定);}
または
.hoge {background-img:gradient(グラデの指定);}

グラデーションと他の背景指定を一括指定

※通常の指定(単色背景を指定しない)とグラデーションの指定を「,(カンマ)」で区切って指定する
.hoge {background:url(背景画像のURL) 開始位置 繰返指定, gradient(グラデの指定);}

実際に記述してみるとこんな感じ
※グラデの指定もややこしいので省略。ベンダープレフィックスも参考程度です。
.hoge {
background:url(/img/back.png) 0 0 no-repeat, -moz-linear-gradient(グラデの指定);
background:url(/img/back.png) 0 0 no-repeat, -webkit-linear-gradient(グラデの指定);
}

ベンダープレフィックスごとに記述しなくちゃいけないのがですね。
下記のように前後に分けて記述すれば勝手に継承してくれるかと思ったけど、ブラウザによっていは後述(グラデ)のみしか効かなかったりします。
.hoge{ background:url(/img/back.png) 0 0 no-repeat}
.hoge{
background: -moz-linear-gradient(グラデの指定);
background: -webkit-linear-gradient(グラデの指定);
}

まだまだいろいろ注意点がありそうで、便利なような不便なような(^^;

コーディングに関する記事

コメント