みなさんこんにちは。 本日の投稿は短くなりますが、便利だと思います。
テキストを下、上などに「フェード」する方法についてよく耳にします。
jsにはオプションがあり、画像とテキストの上に重ねられたcssグラデーションだけのオプションがあります。
今日、この問題を解決するためのわずかに異なるアプローチが思い浮かびました。
その実装は3ペニーほど簡単です。
コンテナとテキスト付きブロックの2つのブロックが必要です。
<div class="shadow"> <div class="text"> ---------------------------- </div> </div>
そして、cssのたった2つのクラス
.shadow{ width:400px; margin:20px auto; cursor:text; box-shadow:inset 0px -190px 190px -50px #add7f8; } .text{ color:#000; position:relative; z-index:-1; background:#f9fca3; }
今ポイント。
テキストを含むブロックをコンテナに入れ、そこに内側の影を設定します。 影自体は、「減衰」が必要な場所にシフトします。 ただし、内側の影はブロックの輪郭全体に沿って分布します。これを避けるために、負の拡張を与えます。 私たちには多くの分散と大きなシフトがあるという事実のために-影の
減衰はそれが必要な場所だけになります。
コンテナの影がその上にあるように、テキストブロックを負のZインデックスに設定する必要があります。
それだけです
プロから：
1）テキストが完全に強調表示されます
2）テキストブロックはストリームからドロップアウトせず、コンテンツをdivラッパーに追加できます（ただし、フェードしなくなります）
3）減衰はブロックサイズに依存せず、常に追加した場所に残ります。
マイナスのうち：
1）Zインデックスが負であるため、テキストにカーソルアイコンを追加する必要がありました（わかりやすくするため）
2）オペラ（11.52）では、ストレッチは多少異なる方法で行われます。その結果、影が非常に強くなります。
3）IEで8までは機能しません
したがって、色、強度、およびサイズをシャドウパラメーターで設定できます。
ここに例
upd同志
VitaZheltyakovは、別のシャドウを適用してメインの背景とよりスムーズにマージすることを提案しています。