14


1

div内の背景画像を修正する方法

かなり奇妙な問題を発見しましたが、説明する方法を知っていると思います。修正方法がわからないだけです!

ヘッダー、「ページコンテンツ」、フッターを含むdiv#container(100%min-height(IEの場合は高さ)の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%;
}

…​the background picture is moving outside of the div. Let me explain これ:背景画像の唯一の目に見える部分は、「

しかし、画像の一部はdivの外側に移動し、非表示になりました。

総括する…​

背景画像が修正されると、背景画像は部分的に非表示になり、divの外側に移動します。 画像は、divの右上ではなく、* browser window *の右上に配置されます。

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

3 Answer


11


この動作は実際に正しいです。 「attachment:fixed」である背景は、適用される要素ではなく、ビューポートに相対的です。 これは、実際にはEric Meyerのhttp://meyerweb.com/eric/css/edge/complexspiral/demo.html[Complex Spiral]デモの基礎です。


4


div内で固定の背景位置を持つことはできませんが、最も簡単な解決策は、画像のサイズのdivを作成することです。 画像を背景にし、 right:0px; top:0px`を使用して、配置したいdivの右上隅の position:absolute`に設定します。 親divが「position:relative」であることを確認してください。そうでない場合、そのdiv内に絶対に配置されません。


1


http://www.w3schools.com/CSSref/css3_pr_background-origin.asp [background-origin]プロパティを追加してみてください。「border-box」の値で問題が解決する可能性があります。 また、「background-size」を定義することもできます。「cover」と「contain」はサポートされており、非常に便利です。