位置：背景画像で固定？

ページに<!DOCTYPE HTML>を追加すると、画像が「div」の背景として表示されるためには、position: fixed;をCSSに追加する必要があることがわかりました。それ以外の場合は空白の白い背景が表示されます。なぜ、この場合、position = fixedにする必要がありますか？位置：背景画像で固定？

.background_image{ 
    position: fixed; <-----Why is this needed & Why doesn't static work? 
    background: #000 url(../Images/Image.jpg) center center; 
    width: 100%; 
    height: 100%; 
    min-height:100%; 
    background-size: cover; 
    overflow: hidden; 
}

ここはサンプルのhtmlです。 div内に明らかに他の要素があり、ヘッダーのリンクを使ってCSSをインポートしています。

<body> 
    <div class="background_image"> 
    </div> 
</body>

出典

2016-07-31 TsTeaTime

これが起こるように使用されています。このポジションを削除すると、これは受け取りませんheight。したがって、これを行う別の方法があります。 vh単位を使用できます。位置fixedを削除し、そしてこの背景にこのcssを追加します。

.background_image{ 
    height: 100vh; 
    background: #000 url(../Images/Image.jpg) center center; 
    width: 100%; 
    min-height:100%; 
    background-size: cover; 
    overflow: hidden; 
    }

出典

2016-07-31 09:12:22

おかげで...を見つけることができます。ここに背景を設定する適切な方法とは何でしょうか？固定または静的？ – TsTeaTime

@TsTeaTimeこの場合、静的なままにしておきます。固定されたバックグラウンドの添付ファイルは、パラレル効果を達成するために使用されます。 –

平均HTMLページには、HTML 5のルールに従わなければならないので、

MDN CSSのドキュメントFROM

位置CSSプロパティは、のために有用であるように設計さ要素を、位置決めするための代替ルールを選択しますスクリプトによるアニメーション効果。このキーワードは、要素が通常の動作を使用することができます

値

静的

、それはそれはフローの現在の位置にをレイアウトされています。上、右、下、 leftおよびz-indexプロパティは適用されません。

相対

このキーワードは、要素がが配置されていなかったかのようにすべての要素をレイアウトし、次にレイアウトを変更する（したがってそれがなければならない要素のためにギャップを残すことなく、要素の位置を調整しますは配置されていませんでした）。 table - * - group、table-row、table-column、table-cell、table-captionの要素のposition：relativeの効果は未定義です。

絶対

要素のためのスペースを残してはいけません。代わりに、の位置に配置します。ある場合は、またはそうでなければ最初の包含ブロックとの相対的な位置に配置します。確かにの配置されたボックスは余白を持つことができ、他の余白はで折り畳まれません。

は、要素のためのスペースを残してはいけない

を修正しました。代わりに、の位置を画面のビューポートに対して指定し、スクロールするとを移動しないでください。印刷するときは、すべてのページのの固定位置に配置します。この値は、常に新しいスタッキングコンテキストを作成します。祖先がなしとは異なるものに設定transformプロパティを持っている場合は、この祖先はheight: 100%動作するためposition: fixedで、コンテナの代わりに、ビューポート

出典

2016-07-31 09:10:51 scaisEdge

あなたは画像を背景-添付プロパティを使用する必要があります。

バックグラウンドアタッチメントには2つの値のうち1つを指定できます。 background-attachment：固定|スクロール;

positionプロパティは、div、pなどのhtml要素を配置するために使用されます。したがって、画像で使用することはできません。

あなたは、これは素晴らしい仕事便利なリンク

http://www.w3schools.com/cssref/pr_background-attachment.asp

出典

2016-07-31 09:18:53

位置：背景画像で固定？

答えて

関連する問題