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