TopDev

Thay giao diện quốc tang bằng CSS đen trắng cho website

minhu 📖 2 phút đọc

Sử dụng thuộc tính filter: grayscale(100%) trên phần tử html là một cách đơn giản và hiệu quả để biến toàn bộ trang web thành đen trắng. Thuộc tính filter với giá trị grayscale(100%) làm cho tất cả các màu sắc trên trang trở thành các sắc thái xám.

Dưới đây là một ví dụ chi tiết về cách sử dụng thuộc tính này:

`

Black and White Page

Welcome to My Website

This is a sample paragraph to demonstrate grayscale filter.

This is a link

© 2024 My Website

`

Những Điều Cần Lưu Ý:#

  • Ảnh và Video: Tất cả các ảnh và video trên trang web cũng sẽ chuyển sang màu xám khi sử dụng thuộc tính grayscale.

  • Khả Năng Đọc: Đảm bảo rằng màu văn bản có độ tương phản đủ với nền để duy trì khả năng đọc tốt. Bạn có thể cần điều chỉnh màu nền và màu văn bản để đảm bảo rằng tất cả các phần tử đều dễ đọc.

  • Tương Thích Trình Duyệt: Hầu hết các trình duyệt hiện đại hỗ trợ thuộc tính filter, nhưng bạn nên kiểm tra tính tương thích để đảm bảo rằng trang web hoạt động như mong muốn trên tất cả các trình duyệt mà người dùng của bạn có thể sử dụng.

  • Tùy Chỉnh: Nếu bạn chỉ muốn một số phần tử cụ thể trở thành đen trắng, hãy áp dụng thuộc tính filter trực tiếp vào các phần tử đó thay vì phần tử html.

Ví dụ:

img { filter: grayscale(100%); }

Điều này sẽ chỉ áp dụng bộ lọc đen trắng cho các hình ảnh trên trang mà không làm thay đổi các phần tử khác.

Nếu bạn có bất kỳ câu hỏi nào khác hoặc cần thêm hỗ trợ, hãy cho mình biết nhé!

Bài liên quan trong #HTML CSS

✓ Đã sao chép link