CSS を使用してサムネイル畫像にトランジションを作成し、ホバー時(shí)に背景がフェードインするようにしようとしています。変換は機(jī)能しませんが、rgba() 値に変更するだけで、うまく機(jī)能します。グラデーションには対応してないのでしょうか？畫像を使用してみましたが、畫像も変換されません。
別の投稿で誰かがそれを?qū)g行したので、これが可能であることはわかっていますが、正確な方法はわかりません。ヘルプ> 使用できる CSS をいくつか示します:
リーリー
2
0
0
解決策の 1 つは、背景の位置を変換してグラデーション変化効果を作成することです。 http://sapphion.com/2011/10/css3-グラデーション遷移と背景の位置/
グラデーションはまだトランジションをサポートしていません (ただし、現(xiàn)在の仕様では、補(bǔ)間を介してグラデーションのようなトランジションからグラデーションのようなトランジションをサポートする必要があると記載されています)。
背景のグラデーションを使用したフェードイン効果が必要な場合は、コンテナ要素に 不透明度 を設(shè)定し、不透明度を「遷移」する必要があります。
(グラデーション トランジションをサポートするブラウザのバージョンはすでにいくつかあります (例: IE10。2016 年に IE でグラデーション トランジションをテストしました。その時(shí)點(diǎn)では機(jī)能しているように見えましたが、テスト コードはもう機(jī)能しません。)
更新日: 2018 年 10 月 プレフィックスのない新しい構(gòu)文 [例: Radial-gradient(...)] を使用したグラデーション トランジションが、Microsoft Edge 17.17134 で (再び?) 動(dòng)作することが確認(rèn)されました。これがいつ追加されたのかはわかりません。最新の Firefox および Chrome / Windows 10 ではまだ動(dòng)作しません。
更新日: 2021 年 12 月 @property の回避策は、最近の Chromium ベースのブラウザで利用できるようになりました (ただし、Firefox では機(jī)能しません)。以下の @mahozad の回答 (または上記の YMMV) を參照してください (そして投票してください)。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
