アファメーションで独立・起業・夢実現。「いきなり！社長宣言！！」-“夢は口に出すことで実現する！”というアファメーション：ライブラリー
2011年4月23日
CSS3でbackground（背景画像とグラデーションを同時に）指定するときの注意。
夢実現のアファメーションを実践する起業家にもっとも読まれているブログは？
CSS3はガシガシ使うべし。
最近、ChromeやSafari、Firefoxなど対応するブラウザも増えてきて、そろそろ積極的に使ってもいいんじゃないか？っていう雰囲気のCSS3。
角丸やドロップシャドウなど、いままでどうしても画像に頼らざるをえなくて、その分余計なコードや作業が必要だったものが、CSSの設定だけであら不思議！？
htmlのコードはそのままに、見た目を簡単に変えることができます。
ウェブ屋にとって、まさに『待ってました』のCSS3ですが、背景画像とグラデーションを同時に指定する場合、注意が必要です。
背景画像が出ない！
今回は透過PNGとグラデーションを指定するという単純なもので、グラフィックツールで作ったカンプをもとに、色の指定をして、んで、背景に画像を指定したら...
...ひょ、表示されない！？
スペルミスをチェックしたり、画像を変えたりしても一向に表示されないんです。
いや、グラデーションは表示されるんだけど、背景画像が出ないんです。
んで、小一時間悩んだところでもう一回チャレンジ。
今度は属性の指定の順番を変えてみたら...
ちゃんと出ました。（汗）
背景（background）の値の順番
基本的にCSSを指定するときは、
#back1 { background: #F00 url(shared/img/headerimg_back.png) repeat left top; }
でも、
#back2 { background: url(shared/img/headerimg_back.png) repeat left top #F00; }
背景色と画像が表示される。
つまり、
『プロパティ（属性）の値は順番が関係ない』
そう思っていたんだけど...。
今回の場合はその順番が原因でした。
×『グラデーションの指定、背景の指定』
○『背景の指定、グラデーションの指定』
という感じです。
具体的には、
#gradient {
width: 900px;
height: 150px;
background: #CCC;
background: -moz-linear-gradient(top, #eee, #999 20%, #eee),
url(shared/img/back.png) repeat 0 0;
background: -webkit-gradient(
linear,
left top, left bottom,
color-stop(0, #eee),
color-stop(20%, #999),
color-stop(100%, #eee)),
url(shared/img/back.png) repeat 0 0;
}
↑これは出ない。
んで、こっち↓が正解。
#gradient {
width: 900px;
height: 150px;
background: #CCC;
background: url(shared/img/back.png) repeat 0 0,
-moz-linear-gradient(top, #eee, #999 20%, #eee);
background: url(shared/img/back.png) repeat 0 0,
-webkit-gradient(
linear,
left top, left bottom,
color-stop(0, #eee),
color-stop(20%, #999),
color-stop(100%, #eee));
}
すっごい細かいことだけど、プチはまりしたので備忘録。
この記事に関連する（かもしれない）書籍
投稿者 kuro : 2011年4月23日 01:43 | ID:842
