4

非常に簡単に言えば、div の背景画像をフェードインしようとしています。私はこれが 2 つの div で行われ、背景画像を覆う div の背景色をフェードアウトすることにより、背景画像を効果的に明らかにする(つまり、フェイク フェードイン) ことを見てきました。これは私の問題を解決しません。

上記の解決策は、「マスク」がボディの背景色と同じ単色の場合に機能します。私の場合、体の背景はテクスチャ画像なので、これは機能しません。「マスク」div を本体と同じ背景画像に設定することもできますが、z インデックス付きの div はやり過ぎのようです。

tl;dr本体のどこかに div があります。その背景画像をフェードインするにはどうすればよいですか? ありがとう！

4

3 に答える 3

3

2 つの div が必要です。1 つ目は背景色がなく、2 つ目は背景画像があります。2 番目のもの (Ashelc が提案した方法) をフェードすると、完了です。

.body {background-image:url(bg.png)}
.toFade {opacity=1 ... alternatives }
...

<div>
    <div class=toFade style="background-image:url(img.png)">
        <!-- possible content -->
    </div>
</div>
于 2012-06-13T22:44:54.567 に答える
2

私の知る限りありえない。これを行うには、2 つの画像 / 要素が必要です。jquery / jquery ui の toggleClass を期間とともに使用できます。

ここで例を参照してください：

Jqueryで.cssを使用して背景画像を変更しながらフェードイン効果を追加する方法

バックグラウンドで画像がフェードするjQuery li（クラスでフェード）

于 2012-06-13T22:44:11.430 に答える
1

Ok！このような「課題」を解決するのに時間がかかりましたが、あなたの要求に近いアイデアを思いついたと思います! 背景画像のみを 1 つの div でFadeIn したいという事実にもかかわらず、clone()メソッドを使用してjQueryスクリプトを 作成しました。

ちょっとした作業が必要なのは、テキストをフェードインしたい場合だけです! 私のスクリプトを見て、それが役に立ったかどうか教えてください!

http://jsfiddle.net/7z8vB/

于 2012-06-14T00:47:04.633 に答える