17

私はかなり奇妙な問題を発見しましたが、それを説明する方法を知っていると思います。私はそれを修正する方法がわかりません！

ヘッダー、「ページコンテンツ」、およびフッターを含む div#container (最小高さ (IE の高さ) が 100% の div) を持つページがあります。div#container の背景画像は固定されているはずです (位置は固定されていませんがbackground-attachment: fixed、スクロールすると画像が追従します)。

問題は、CSS で background-tag に固定添付ファイルを追加すると、背景画像が div の外に配置されることです。

CSS は次のとおりです: (なしbackground-attachment: fixed;)

div#container {
    position:relative;
    width:900px;
    margin:0 auto;
    background-color: #ccffff;
    background-image: url("pics/sign.jpg");
    background-repeat: no-repeat;
    background-position: right top;

    height:auto !important;
    height:100%;

    min-height:100%;
}

margin:0 auto;divを中央に配置する!importantことであり、最初のことはheight:、IEにその特定の高さタグを無視させることです。これは、機能する必要がある場合に必要ですmin-height: 100%。

これを加えると・・・

div#container {
    position:relative;
    width:900px;
    margin:0 auto;
    background-color: #ccffff;
    background-image: url("pics/sign.jpg");
    background-attachment: fixed; //This is what is added to the code-sample
    background-repeat: no-repeat;
    background-position: right top;

    height:auto !important;
    height:100%;

    min-height:100%;
}

...背景画像が div の外に移動しています。これを説明させてください: 背景画像の唯一の目に見える部分はまだ の中にあるものですが<div id="container">、画像の一部は div の外側に移動し、現在は見えません。

総括する...

背景画像を固定すると、背景画像の一部が隠され、div の外に移動します。画像は、div の右上ではなく、ブラウザ ウィンドウの右上に配置されています。

皆さんが私を助けてくれることを願っています!

4

5 に答える 5

16

この動作は実際には正しいです。attachment: fixed適用される要素ではなく、ビューポートに関連する背景。これは実際、Eric Meyer のComplex Spiralデモの基礎となっています。

于 2010-08-20T20:03:28.203 に答える
-1

background-originプロパティを追加してみてborder-boxください。値によって問題が解決する可能性があります。また、 を定義background-sizeしておくcoverとcontain、サポートされており、非常に便利です。

于 2013-06-17T01:19:59.457 に答える