divの最後にテキストをフェードアウトできますか？

私はスクロールして、画像を使わずに背景画像上のdivの上部にテキストを消していく方法はありますか？divの最後にテキストをフェードアウトできますか？

私はここに来て、なぜ私はイメージを使用する必要があるすべての理由を教えてくれる人がいると知っていますが、あなたがイメージを使用しない場合

何かアドバイスをいただければ幸いです...

2011-08-15 Andy

divのテキストの一部を消したいが、すべてのテキストを消したいのではないか。 –

私はあなたの質問を理解していない、ちょうどいくつかのテキストは、div上にマウスを動かしたときに退色したいですか？ – Loktar

[CSS 3のグラデーションアルファフェードアウトエフェクト]の複製が可能です（http://stackoverflow.com/questions/3543887/gradient-alpha-fade-out-effect-with-css-3） –

divを別の要素（できれば擬似要素）でオーバーレイし、divの背景色に合わせて背景勾配を付ける必要があります。

あなたの背景が黒であると仮定すると、あなたはこれを使用します：http://jsfiddle.net/SFYrg/

あなたは明らかに、これらすべてのベンダープレフィックスを追加する必要があります：

div { 
    position: relative; 
} 
div:before { 
    background: -webkit-linear-gradient(top, rgba(0, 0, 0, 1) 5%, rgba(0, 0, 0, 0) 100%); 
    content: ''; 
    position: absolute; 
    width: 100%; 
    height: 50px; 
}

はここでフィドルです。

出典

2011-08-15 18:42:18

良いアイデア、入力のおかげで...それはJSとクロスブラウザの互換性のために行うことができますか？ – Andy

これらのプレフィックスをすべて自分で追加することを怠っている場合は、https://github.com/codler/jQuery-Css3-Finalizeを使用してください。私の答えがあなたの質問を解決したら、それを受け入れて、このポストに来る他の人が答えを知るようにします。 –

:)それは怠け者ではありません。色付きの背景画像が含まれているため、私はちょうどJSで最も役立つ非常にユニークな問題があります。 – Andy

は、あなたのコンテンツのdivの上に重ねられるのdivに、代わりにグラデーションを使用することができます。

すべてのブラウザ固有のプレフィックスを使用して、グラデーションをすばやく生成するためにhttp://www.colorzilla.com/gradient-editor/を使用できます。

出典

2011-08-15 18:40:52

これは古いブラウザ、特にIEとの互換性に問題があることに注意してください。 –

これは別のアプローチのおかげです...私はそれが文字通りJSまたは何かを使って行うことができるかどうか疑問に思っていた... – Andy

$("myElement").fadeOut("slow");

テキストを何らかの種類のコンテナに入れて、jQueryでフェードアウトします。イメージは必要ありません。

出典

2011-08-15 18:40:52

divの最後にテキストをフェードアウトできますか？

答えて

関連する問題