CSSで背景にグラデーションをかけたい時。bodyにグラデーションを指定したのですが、スクロールが発生する時、グラデーションが途切れてしまうことがあります。背景を固定させる以外の方法で、ページ全体にグラデーションを適用させる方法はありますか?(高さ100%を指定してもダメでした。コンテンツサイズは可変になるのでピクセルなどでの高さ指定はできません)
body直下に全体を囲む要素を配置して、position:absolute; top:0;bottom:0; left:0;right:0;みたいにしてもだめかな。
むむ…ブラウザを開いた時の初期高さまではばっちりグラデーションがかかってるのですが、スクロールするとやはり初期高さを超えた時点でグラデーションが繰り返されております…。面倒ですが、背景を2枚重ねて、上に来るグラデーションの色を透過させるしかないですかねー…。こんな感じに…background: rgba(250, 250, 250, 0.5), -webkit-gradient(linear, center top, center bottom, from (rgba(210, 210, 210, 0.5)), to(rgba(250, 250, 250, 0)));
ちなみに、body要素って背景の指定は一つしかできないんでしょうか?body { background: rgba(210, 210, 210, 0.5), url(background.jpg);}これで両方指定しようとしたんですが、画像しか出なかったです。画像を消すと背景色が出てきます。
最近のブラウザなら複数背景指定できますよ。background.jpgで背景色が上書きされてんじゃないかな。順番かえてみたら?
ですよねー…最新バージョンのChromeで見たんですがダメで…。順番はこのままで、色の部分をグラデーション(↓)にしたらできました。-webkit-gradient(linear, center top, center bottom, from(rgba(210, 210, 210, 0.5)), to(rgba(210, 210, 210, 0.5))), url(background.jpg)グラデーションしてないので無駄なんですけども…。うーん…。
文法が間違ってる。色と画像の間にカンマはいらない。
こんなんでいいならできましたけど(Chromeしか見てないので、あとは自分で調整してください)
おー…CSSでの方法を探していたので、こちらはちょっと使えないですね。わざわざありがとうございます。
あ、jsは高さの変更を擬似的に作っているだけなので、CSS部分だけ使っていただければ。
途中で切れるとはどういう状況なのでしょうか。キャプチャとかあればわかりやすいのですが。スクロールしたら消えるのは、描写されてないからかもしれません。グラデーションに限らず、画像でもなるのですが、外側の要素にmin-width指定してあげると直ります。
みんなの回答 4 件
body直下に全体を囲む要素を配置して、position:absolute; top:0;bottom:0; left:0;right:0;みたいにしてもだめかな。
ちなみに、body要素って背景の指定は一つしかできないんでしょうか?
body {
background: rgba(210, 210, 210, 0.5), url(background.jpg);}
これで両方指定しようとしたんですが、画像しか出なかったです。
画像を消すと背景色が出てきます。
こんなんでいいならできましたけど(Chromeしか見てないので、あとは自分で調整してください)
背景画像とグラデ - jsdo.it - Share JavaScript, HTML5 and CSS
http://jsdo.it/Ituki/na9a途中で切れるとはどういう状況なのでしょうか。
キャプチャとかあればわかりやすいのですが。
スクロールしたら消えるのは、描写されてないからかもしれません。
グラデーションに限らず、画像でもなるのですが、外側の要素にmin-width指定してあげると直ります。
【CSS】意外と知られていない!横幅100%の背景が切れるバグ - 世界を変えるのはブルペンキャッチャー
http://sekabull.hatenablog.jp/entry/2013/08/07/105412関連するトピックス