ホームページ > ウェブフロントエンド > htmlチュートリアル > 画面をbackground_html/css_WEB-ITnoseで埋める方法を教えてください。

画面をbackground_html/css_WEB-ITnoseで埋める方法を教えてください。

WBOY
リリース: 2016-06-24 11:50:27
オリジナル
1128 人が閲覧しました


背景を画面いっぱいに表示できないのはなぜですか? </div> {
背景: -moz-linear-gradient(top, #F1F1F1, #BFF08E);
背景: -webkit-linear-gradient(top, #F1F1F1, #BFF08E) }
body {background:none;}

html,body{height:100%;margin:0;padding:0;}

div{height:2000px;}
高さ 2000 ピクセル以降は?背景を画面全体に表示できないのはなぜですか?

スタイルは div で設定されています

<style>div {background: -moz-linear-gradient(top, #F1F1F1, #BFF08E);background: -webkit-linear-gradient(top, #F1F1F1, #BFF08E);}body {background:none;}html,body{height:100%;margin:0;padding:0;} div{height:2000px;}</style><div>
ログイン後にコピー

上の階のお兄さん、Web ページの背景を全画面表示にしたいんです...

<style>body {background: -moz-linear-gradient(top, #F1F1F1, #BFF08E);background: -webkit-linear-gradient(top, #F1F1F1, #BFF08E);}html,body{margin:0;padding:0;} div{height:10000px;}</style><div/>
ログイン後にコピー





ああ、どうやらそうです。ページが小さいため、すべてに互換性を持たせる方法はありません。
html,body{height:100%;margin:0;padding:0;} を使用してください。
ページのサイズが大きい場合は、100% を使用しないでください
これが唯一の方法ですか

html{

height:100%

}
無理ですか?

個人的には、PCごとに縦横の解像度が違うので、CSSだけでやるほうが面倒だと思います... 私が作ったWebサイトは、JQUERY.aeImageResize:

html:

///外側には DIV が含まれている必要があり、DIV 属性は overflow:hidden に設定されている必要があります

// /h は画像の実際の幅、w は画像の実際の長さ

jquery:
function bgResize(id, w, h) {
var img_w = $(id).attr("w");
var img_h = $(id).attr("h");
var h_scale = h / img_h; * img_w < w) { h_scale = 0;

else if (w_scale * img_h : w });
}
else {I $ (ID) .aeimageResize ({height: h, width: 0}); w は画像を拡大縮小する長さ、H は画像を拡大縮小する幅です。次に、$(document).ready で bgResize を使用します。

背景スタイルの定義は body に配置されます
デフォルトの背景レイヤーは body です

html,body{height:100%;}
body {
background: -moz-linear-gradient(top, #F1F1F1 , # BFF08E);
background: -webkit-linear-gradient(top, #F1F1F1, #BFF08E);

HTML タグに背景を描くように言う人は誰もいません




ああ、それは役に立ちません、遭遇しました スクロールバーがあると下半身が完全に覆われていません...
あげます、先に投稿を終わらせます...





ああ、私がやるときは役に立ちません。スクロール バーに遭遇しました。下半身が完全に覆われていません...
譲ってください。皆さん、まず投稿を終了しましょう...

body {
height:auto;
min-height:100%
}

これを追加して見てみましょう

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート