プロが教えるわが家の防犯対策術!

表題の件で質問です。

ホームページの背景画像を設定するとき、最近良く上の方は薄い色で
下の方にいくと濃い色になるようなグラデーションを指定しているサイトが
多い気がするのですが、ああいう背景はどのようにして指定しているのでしょうか?

例えば白黒グラデーションで、上の方を#000で下を#fffになるような
グラデーション画像を作り、縦方向のリピートをさせずに背景を#fffで
指定すれば上が黒で下に行くとだんだん白くなるようなグラデーションに
なると思うのですが、逆の場合ってどのようにしてつくるのでしょうか?

例えばマイクロソフトのホームページがそのような感じです。
http://www.microsoft.com/ja/jp/default.aspx

こういった感じの背景にしたいとき、どのような方法でやればよいでしょうか?

ご存知の方がいらっしゃいましたら是非ご教示ください。
よろしくお願い致します。

A 回答 (2件)

ソースを見れば一目瞭然です。



bodyの背景色はrgb(236,245,251)、「おすすめ情報」って書いてあ
る高さあたりまではこの単色が見えています。背景画像は、
http://i3.microsoft.com/ja/shared/templates/mast …
をcenter bottomで配置してrepeat-xしていますね。上部は背景色に
近いあたりでじわ~っとグラデーションしてて、下部で急速に濃く
しています。ページ上部の単色からの移行がスムーズですね。

継ぎ目を感じさせない、グラデーションカーブの妙ってヤツがキモ
で、配置はbackground-positionでbottomって言えばいいわけ。ちな
みにbackground-position-yなんて属性はCSS2.1には存在しません。
MSのサイトでも使われていないIE独自の方言でしょう。
    • good
    • 0
この回答へのお礼

参考になりました。
ありがとうございました。

お礼日時:2009/04/05 03:00

背景画像の位置は任意で設定できます。


background-position-y: 100%;
とすれば、背景画像はページ下部に表示されます。
    • good
    • 0
この回答へのお礼

参考になりました。
ありがとうございました。

お礼日時:2009/04/05 02:59

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!