1

私はこのようなHTMLを持っています：

<div id='container'>

    <div id='main'>

    </div>

</div>

そしてCSS

div#container {
    width:960px;
    margin:0 auto;
}

div#main {
    background: #000000 url('images/bg_placeholder.jpg') no-repeat 85% 100px fixed;
    color:white;
    padding-bottom:30px;
}

#mainは、その#containerと同じ幅です。#mainの右上に固定の背景画像を配置しようとしています。ただし、background-attachment：fixedを配置すると、フローから削除されているようです...

その中で、画像はメインの右上には配置されませんが、ページの右上、またはおそらくコンテナのように見えます。

スクロールモードでは、メインに最適です。固定に切り替えたときのみです。

これはどのように機能しますか？これを回避する方法はありますか？

4

2 に答える 2

1

何を達成しようとしているのか正確にはわかりませんが、うまくいけば、これが少なくとも部分的にあなたの質問に答えることを願っています.

ここであなたの状況を再現しました。background-attachment:fixed;あなたが正しくやろうとしていることを理解していれば、削除すると問題が解決するようです。

サイトポイントの記事からbackground-attachment：

固定された値は、背景画像がそれを含むブロックでスクロールするのを止めます。固定の background-image はドキュメント全体の要素に適用できますが、その background-position は常にビューポートを基準にして配置されることに注意してください。これは、background-image が適用される要素のコンテンツ、パディング、または境界領域とその background-position が一致する場合にのみ、background-image が表示されることを意味します。したがって、固定背景画像は、ビューポートに関連して配置されるため、スクロールバー (オーバーフローを参照) を持つ要素では移動しません。

編集:問題を解決する方法は次のとおりです: http://jsfiddle.net/ep6kQ/3/

EDIT EDIT:ユーザーが含まれている要素の下にスクロールすると、画像が消える問題が発生します。誰でもこれを修正する方法を知っていますか?

于 2011-09-20T16:46:20.233 に答える
0

固定を削除し、画像の CSS でマージン プロパティを使用します。それは醜い修正ですが、おそらくうまくいくでしょう。また、固定の代わりに絶対を使用してみてください。(現在、ソフトウェアをインストールしてテストすることはできません。) うーん。

于 2011-09-20T16:35:21.727 に答える