5

-webkit-gradient を使用してフェードアウトする要素に反射を表示するための CSS があります。

.foo { -webkit-box-reflect: below 0 -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0)), to(rgba(255, 255, 255, 0.5)), color-stop(0.7, transparent)); }
  • クロムなどの -webkit-box-reflect をサポートするブラウザーでは、要素の反射が表示されますが、期待どおりに徐々にフェードアウトします。
  • まったくサポートしていないブラウザーでは、リフレクションは表示されません。

ただし、Android のブラウザーでは、反射は表示されますが、フェードアウトしません。

Android を次のいずれかに取得する方法はありますか。

  1. 反射をフェードアウトする、または
  2. 反射をまったく表示しません。

JavaScript を使用してブラウザーを検出し、それに応じてスタイルを変更できることはわかっていますが、CSS のみのソリューションを好むでしょう。

4

4 に答える 4

1

サンプル ファイルやリンクがないと、必要なものを確認するのが少し難しくなります。

また、数か月前にいくつかのリフレクションを試してみましたが、あなたが説明したことを実行できるものは何も見つかりませんでした. コード以外で、必要なものを取得するためのいくつかの手順があります。反映したいアイテムは、まず背景を透明にしたPNGにすることをお勧めします。

手順: 1. お気に入りの画像操作プログラム (Photoshop など) に画像を取り込みます。

  1. 適切な方向に反射を含めるために必要な量だけ画像キャンバスを 2 倍にするか拡張します
  2. レイヤーを複製する (Photoshop-Layer/Duplicate Layer)
  3. イメージを反映します。(Photoshop-Layer/Image Rotation/Flip Canvas (あなたの方向) )
  4. 移動ツールを使用して、複製したレイヤーを鏡のように移動します
  5. Marquis ツールを選択し、エッジのぼかしを元の画像幅の約 50% に設定します。
  6. カーソルを「反射」レイヤーの上にドラッグします。何も選択されていないというメッセージが表示されない限り、選択ラインが表示されないというメッセージが表示されても心配する必要はありません。何も選択されていないというメッセージが表示された場合は、エッジのぼかしを約 25% に減らしてから、もう一度試してください。
  7. 選択範囲が表示されているかどうかに関係なく、選択した領域を削除します。これにより、「反映された」外観が得られます。
  8. 必要に応じて、他のすべての下のレイヤーに背景を追加します。
  9. 透明な背景がない場合は jpg、透明な場合は png として画像を保存します。コードで反射してフェードアウトしていた画像の代わりに使用します。これはほとんどのブラウザ互換性があります。
于 2012-10-25T14:10:02.943 に答える
0

Android ブラウザーで背景のグラデーションを使用しようとすると同様の問題が発生し、完全にサポートされていないようです

残念ながら、上記の答えは正しいです。宣言を段階的に拡張する方法で分割する方法はありません。あなたが言及したように JavaScript/modernizr を使用し、少なくともサポート クラスを設定して、実際にコード内でスタイルを反転する必要がないようにすることができます。

画像で drawImage を使用して変換し、HTML キャンバス要素でこの効果を再現することができます。ただし、モバイル Webkit ではキャンバスが遅くなる可能性があります。

幸運を

于 2011-09-07T21:17:46.620 に答える
0

CSS は、そのようなものを処理するようには設計されていません。言い換えれば、いいえ、それは不可能です。

于 2011-08-16T19:28:31.830 に答える
0

Androidブラウザでグラデーションはまったく機能しますか? その場合は、正しいバージョンを使用していることを確認してください。使用する必要がある古い webkit 形式があります。そうでない場合は、modernizr を使用して、グラデーションをサポートしていない場所で非表示にします。

于 2012-10-20T19:49:47.250 に答える