-1

この効果を HTML/CSS で再現する方法を探しています。背景として放射状のグラデーションを設定してから、透明な暗いオーバーレイを配置し、ボタンなどを白く透明にするだけで簡単だと思いましたが、ほぼ同じ効果は得られません。

これは私が再現しようとしている効果です:

ここに画像の説明を入力

CSS に精通している人は、たまたまこれを達成する方法を知っていますか? 私はすべてを見てきましたが、1つのブラウザーでほとんど機能しない非常に複雑な回避策ではない方法は見つかりませんでした. マルチブラウザ機能はオプションです。私は主に chrome と firefox に関心があります。

前もって感謝します!

編集:物事をさらにトリッキーにするために、はい、これは放射状のグラデーションです。私は一種の悪い写真を投稿しました。より良い例を次に示します。

ここに画像の説明を入力

4

1 に答える 1

3

テキスト/画像にはオーバーレイのブレンドモードがあります。背景のグラデーションの向きに関係なく、テキストとボタンはそれに「適応」します。

mix-blend-mode: overlay;

リスト要素だけで簡単なデモを再作成しました。お役に立てば幸いです。

デモ

http://codepen.io/aarjithn/pen/WQyLNz?editors=010

于 2015-10-31T23:56:20.253 に答える