cssは画像をページ全体の背景にします
2233 ワード
質問:背景画像は背景としてページ全体を並べ替える必要があります.
長い間使われていなかったが、一時は反映されなかった.あるいは、以前似たような応用シーンがあり、総括が欠けていたので、思考が形成されなかった.これも1つの問題を説明して、絶えず実践して、新しい応用シーンを追加して、しかもタイムリーに総括して、このようにやっと良好な思惟の反映を形成することができて、これもまた経験と経験の1つの違いであるべきで、総じて言えば、タイムリーに総括して、論理を撫でて、このようにやっと自分の功力を高めることができます.もう一つ重要なのは、よく使うこと、よく叩くこと、使えること、ルールをもっとよく使うこと、真知を実践することです.
試行:
スクリーン上のcssスタイルの開始
大きなスクリーンに背景repeatが見つかり、repeatを加えると画面全体が満たされていないことがわかりました.
backgrouns-size:100%を加えると画面がいっぱいになりますが、スクロールすると画面の下の部分が上書きされず、background-attachment:fixedを加えることで問題を解決できます.
解決策:cssは画像をページ全体の背景にする
他の人のコード:
ここでimages/background.jpgはあなたの画像urlです.このコードはIE 6/7/8/9およびすべての現代ブラウザと互換性があります./私:テストしてない
関連ルール:cssにおけるbackground関連ルール
background-color
background-image
background-position:数値/パーセント/値
background-attachment :fixed/scroll/inherit
background-size:値/親要素パーセント/cover/contain
background-origin:padding-box/content-box/border-box
background-originプロパティは、background-positionプロパティがどの位置に対して位置決めされるかを規定します.そこで背景図をどこから表示するかも決めました(ここは后ろに加えて、ここも私に1つの启示を与えて、先生があなたにすべてを教えることができることを期待しないでください、彼も彼が使ったあの部分だけを熟知して、もちろん他の人の多くの経験は学ぶ価値があって、他の人の探求、他の人が踏んだ穴、それはすべて効率の向上に対してで、いわゆる大牛は多分踏んだ穴が多いので、穴を迂回する経験は比较的に豊富です.)
注記:バックグラウンド画像のbackground-attachmentプロパティがfixedの場合、このプロパティは効果がありません.
backgroud-clip:バックグラウンドペイント領域を指定する 画像の表示場所を設定することもできます
padding-box/content-box/border-box
長い間使われていなかったが、一時は反映されなかった.あるいは、以前似たような応用シーンがあり、総括が欠けていたので、思考が形成されなかった.これも1つの問題を説明して、絶えず実践して、新しい応用シーンを追加して、しかもタイムリーに総括して、このようにやっと良好な思惟の反映を形成することができて、これもまた経験と経験の1つの違いであるべきで、総じて言えば、タイムリーに総括して、論理を撫でて、このようにやっと自分の功力を高めることができます.もう一つ重要なのは、よく使うこと、よく叩くこと、使えること、ルールをもっとよく使うこと、真知を実践することです.
試行:
スクリーン上のcssスタイルの開始
body{
width:100%;
height:100%;
background:url('./assets/BG.png');
}
大きなスクリーンに背景repeatが見つかり、repeatを加えると画面全体が満たされていないことがわかりました.
backgrouns-size:100%を加えると画面がいっぱいになりますが、スクロールすると画面の下の部分が上書きされず、background-attachment:fixedを加えることで問題を解決できます.
解決策:cssは画像をページ全体の背景にする
body{
width:100%;
height:100%;
background:url('./assets/BG.png');
background-repeat: no-repeat;
background-size:100% 100%;
background-attachment:fixed;
}
他の人のコード:
html, body
{
margin: 0;
padding: 0;
background: url('images/background.png');
repeat: no-repeat;
background-attachment:fixed;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/background.jpg', sizingMethod='scale');
-ms-filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/background.jpg', sizingMethod='scale');
background-size: cover;
-moz-background-size: cover;
-webkit-background-size: cover;
}
ここでimages/background.jpgはあなたの画像urlです.このコードはIE 6/7/8/9およびすべての現代ブラウザと互換性があります./私:テストしてない
関連ルール:cssにおけるbackground関連ルール
background-color
background-image
background-position:数値/パーセント/値
background-attachment :fixed/scroll/inherit
background-size:値/親要素パーセント/cover/contain
background-origin:padding-box/content-box/border-box
background-originプロパティは、background-positionプロパティがどの位置に対して位置決めされるかを規定します.そこで背景図をどこから表示するかも決めました(ここは后ろに加えて、ここも私に1つの启示を与えて、先生があなたにすべてを教えることができることを期待しないでください、彼も彼が使ったあの部分だけを熟知して、もちろん他の人の多くの経験は学ぶ価値があって、他の人の探求、他の人が踏んだ穴、それはすべて効率の向上に対してで、いわゆる大牛は多分踏んだ穴が多いので、穴を迂回する経験は比较的に豊富です.)
注記:バックグラウンド画像のbackground-attachmentプロパティがfixedの場合、このプロパティは効果がありません.
backgroud-clip:バックグラウンドペイント領域を指定する 画像の表示場所を設定することもできます
padding-box/content-box/border-box