アファメーションで独立・起業・夢実現。「いきなり!社長宣言!!」-“夢は口に出すことで実現する!”というアファメーション:ライブラリー

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

ページトップ△

ページトップ△