1

以下に例を示します: http://jsfiddle.net/MyDkR/8/

コードは次のとおりです。

.fixed {
    height: 250px;
    width: 250px;
    background: #000 url('http://placekitten.com/200/600') no-repeat;
    background-size: auto 100%;
    background-attachment: fixed;
}

.notfixed {
    height: 250px;
    width: 250px;
    background: #000 url('http://placekitten.com/200/600') no-repeat;
    background-size: auto 100%;
}

最上位の要素は、背景の高さが要素の高さと等しいことを宣言する background-size プロパティを保持しません。

一番下の要素は、background-attachment: 固定ルールがないことを除いて同じです。

これはレンダリングのバグですか? 最新バージョンの IE と Chrome でテストしました。もしそうなら、背景のサイズを更新する方法はありますか?

4

3 に答える 3

2

要素のサイズを持ち、画面上で固定されている要素の背景は、'position: fixed' の疑似要素でエミュレートできます。overflowしかし、問題は、固定位置の子要素に影響を与えないため、要素をこの疑似要素でクリップすることです。私が知っている唯一の回避策 (このロシアのブログ記事にあります) は、CSSclipプロパティ (絶対配置ラッパーが必要) を使用することです。

JSFiddle の例

HTML:

<div class="fixed"><div></div></div>

CSS:

.fixed {
    height: 250px;
    width: 250px;
    position: relative;
}

.fixed > div {
    position: absolute;
    top: 0;
    left: 0;
    width: inherit;
    height: inherit;
    clip: rect(0px, 250px, 250px, 0px);
}

.fixed > div::before {
    content: '';
    position: fixed;
    height: inherit;
    width: inherit;
    background: #000 url('http://placekitten.com/200/600') no-repeat;
    background-size: auto 100%;
    z-index: -1;
}

欠点は、clip(パーカンテージではなく) 長さの単位で値を設定する必要があることです。これは、要素の高さが実際に動的である必要がある場合に問題になる可能性があります。その場合、Henrique Feijo のソリューションの方が適切かもしれません。

于 2013-08-27T19:55:21.920 に答える
1

JavaScript バージョンに興味がある場合は、次の方法を試してください。

$(document).ready(function(){
    $('#smaller').click(function(){
        var oldHeight = $('.fixed').height();

        $('.fixed, .notfixed').css('height', oldHeight/1.25 +'px');
        $('.fixed').css("background-size", "auto " + $('.fixed').height() + "px")
    });
});

クリックすると、背景のサイズが変更されます。ボックスに完全に一致させるには、高さを約 10px 追加する必要があるかもしれません。

于 2013-08-27T16:48:47.030 に答える