CSS を使用して、マウスオーバー時にサムネイルにトランジションを作成して、ホバー時に背景がフェードインするようにしようとしています。変換は機能しませんが、それを rgba()value に変更するだけで正常に機能します。グラデーションには対応してないのでしょうか？画像を使用してみましたが、画像も変換されません。
誰かが別の投稿で同じことをしたので、これが可能であることはわかっていますが、正確な方法はわかりません。ヘルプ> 使用できる CSS をいくつか示します:
#container div a { -webkit-transition: バックグラウンド 0.2 秒のリニア。 -moz-transition: バックグラウンド 0.2 秒のリニア。 -o-transition: バックグラウンド 0.2 秒のリニア。 トランジション: バックグラウンド 0.2 秒リニア。 位置: 絶対; 幅: 200ピクセル; 高さ: 150ピクセル; ボーダー: 1px #000 ソリッド; マージン: 30px; Zインデックス: 2 } #container div a:hover { 背景: -webkit-gradient(radial, 100 75, 100, 100 75, 0, from(rgba(0, 0, 0, .7)), to(rgba(0, 0, 0, .4))) }
![[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) を参照してください (そして投票してください)。