Cách đảo màu bằng CSS

Cách đảo ngược màu sắc của các phần tử và hình ảnh bằng CSS

Tôi đã có vấn đề này. Tôi đã thêm hình ảnh "đen trắng" trên một trang, chỉ để nhận ra rằng với chế độ tối, trang của tôi thay đổi nền thành màu đen một cách chính xác, nhưng hình ảnh vẫn trắng trên nền đen.

Tệ thật.

Vì vậy, tôi đã thêm quy tắc này vào CSS của mình để phát hiện chế độ tối và tự động đảo ngược màu của hình ảnh:

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

Nó không chính xác 100% trong trường hợp của tôi, bởi vì màu nền tối của tôi không phải là màu đen hoàn hảo, nhưng còn hơn không.

Để làm cho mọi thứ trở nên hoàn hảo, bạn cũng có thể thêm hình ảnh bằng cách sử dụng hình nền CSS thay vìimgtrong HTML và tôi có thể dễ dàng hoán đổi thẻ đó ở chế độ tối.

Tải xuống miễn phí của tôiSổ tay CSS

Cách đảo màu bằng CSS

Cách đảo ngược màu sắc của các phần tử và hình ảnh bằng CSS

Các hướng dẫn css khác: