0

ページの幅/高さを満たす背景画像を読み込むために jQuery を使用しています。ヘッドには次のものがあります。

$(document).ready(function() {
    $('body').css({
    'background-image' : 'url({HTML_BASE}images/backgrounds/randoms/{BACK_IMG})',
        'background-repeat' : 'no-repeat',
        'background-position' : 'center top',
        'background-attachment': 'fixed',
        'background-size': '100% 100%',
    });
    $('#home-promo').innerfade({ 
        speed: 'slow', 
        timeout: 5000, 
        type: 'sequence', 
        containerheight: 'auto'
    });

    $('.model-search').innerfade({ 
        speed: 'slow', 
        timeout: 5000, 
        type: 'sequence', 
        containerheight: '393'
    });

});

これは問題なく動作し、 http://projects.snowshtechnologies.com/golden_dragon/home/で確認できます。

BG 画像を黒い背景色からフェード インさせたい。css で定義された body 要素としては不可能であることを示唆する Stack 上の他のいくつかのスレッドを見てきましたが、このシナリオでは、BG 画像は jQuery によって読み込まれています。このコードにフェードインを追加して、素敵なフェードインで画像を取り込むにはどうすればよいですか?

4

3 に答える 3

2

bodybackground-colorを に設定してからblackdiv のような要素を作成し、それfixedをfadeブラウザのビューポートの幅と高さ全体を埋める要素として配置します。

于 2012-07-01T21:17:20.883 に答える
0

利用可能なスペースを埋めるために、ボディの上に幅と高さ 100% のコンテナーを作成し、必要に応じて a を指定しz-indexて他の要素の下に配置します。次に、コンテナの背景画像を CSS で設定し、 を設定しopacity: 0ます。最後に、jQuery を使用fadeTo()して 100% の不透明度に移行します。

于 2012-07-01T21:15:37.967 に答える
-1

CSS3 トランジションを使用すると、背景画像にフェードインを追加できます。したがって、次のプロパティを追加すると:

transition: background 0.5s;

body div に対して、それをサポートするブラウザーのフェードインを取得できます。ただし、これは CSS3 遷移をサポートしていないブラウザーではサポートされません。

于 2012-07-01T21:10:18.890 に答える