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ìimg
trong 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ác hướng dẫn css khác:
- Hướng dẫn Flexbox
- Hướng dẫn về CSS Grid
- Biến CSS (Thuộc tính tùy chỉnh)
- Giới thiệu về PostCSS
- Thuộc tính lề CSS
- Cách căn giữa một phần tử bằng CSS
- Phông chữ Hệ thống CSS
- Cách in HTML của bạn với phong cách
- Hướng dẫn giới thiệu về Chuyển đổi CSS
- Hướng dẫn tạo ảnh động CSS
- Giới thiệu về CSS
- Hướng dẫn CSS
- Cách thiết lập Tailwind với PurgeCSS và PostCSS
- Tờ Tailwind Cheat
- Cách xoay liên tục hình ảnh bằng CSS
- Tạo bảng phản hồi bằng CSS
- Cách gỡ lỗi CSS bằng cách chia đôi
- Bộ chọn CSS
- Xếp tầng CSS
- Đặc tính CSS
- Bộ chọn thuộc tính CSS
- Màu sắc CSS
- Đơn vị CSS
- Url CSS ()
- Kiểu chữ CSS
- Mô hình hộp CSS
- Thuộc tính vị trí CSS
- Truy vấn phương tiện CSS và thiết kế đáp ứng
- Truy vấn tính năng CSS
- Chuyển đổi CSS
- Cách tạo kiểu danh sách bằng CSS
- Tiền tố nhà cung cấp CSS
- Kế thừa CSS
- Lớp giả CSS
- Phần tử giả CSS
- Tạo kiểu bảng HTML bằng CSS
- Thuộc tính Hiển thị CSS
- Hàm calc () CSS
- Đường viền CSS
- Nhập tệp CSS bằng @import
- Xử lý lỗi CSS
- Bộ lọc CSS
- Kích thước hộp CSS
- Nền CSS
- Nhận xét CSS
- Phông chữ CSS
- CSS Padding
- Thuộc tính float CSS và thanh toán bù trừ
- Chuẩn hóa CSS
- Thuộc tính CSS z-index
- Cách tắt lựa chọn văn bản bằng CSS
- Cách đặt một mục ở dưới cùng của vùng chứa bằng CSS
- Cách đảo màu bằng CSS
- Các thẻ pre đáp ứng trong CSS
- Nhúng video YouTube thích ứng
- Giá trị Điểm ngắt CSS tốt cho Thiết kế đáp ứng là gì?
- Cách căn giữa trong flexbox