CSSを使用して色を反転する方法

CSSを使用して要素と画像の色を反転する方法

私はこの問題を抱えていました。ページに「白地に黒」の画像を追加しましたが、ダークモードでは、ページの背景が黒に正しく変更されますが、画像は黒地に白のままです。

ちょっと悪い。

そこで、このルールをCSSに追加して、ダークモードを検出し、画像の色を自動的に反転させました。

@media (prefers-color-scheme: dark) {
  .my-image {
    filter: invert(100%);
  }
}

私の場合、暗い背景色が完全に黒ではないため、100%正確ではありませんが、何もないよりはましです。

物事を完璧にするために、代わりにCSS背景画像を使用して画像を追加することもできますimgHTMLでタグを付けると、ダークモードで簡単に交換できます。

私の無料ダウンロードCSSハンドブック


その他のCSSチュートリアル: