Đưa ra một hình ảnh và nhiệm vụ là thay đổi màu hình ảnh bằng CSS. Sử dụng chức năng lọc để thay đổi màu ảnh png. Thuộc tính bộ lọc chủ yếu được sử dụng để đặt hiệu ứng hình ảnh cho hình ảnh. Có nhiều giá trị thuộc tính tồn tại cho chức năng lọc Show filter: none|blur()|brightness()|contrast()|drop-shadow()|grayscale() |hue-rotate()|invert()|opacity()|saturate()|sepia()|url(); ví dụ 1. Ví dụ này sử dụng bộ lọc thang độ xám để thay đổi hình ảnh màu thành hình ảnh thang độ xám
Hãy tưởng tượng bạn nhận được một hình ảnh cụ thể từ nhóm sản phẩm nhằm hoạt động như một biểu tượng cho một nút. Nút có nền trắng, viền đen, chữ đen, riêng hình ảnh thì đậm hơn Trạng thái phần tử ban đầuCSS cho phần tử này có thể được nhìn thấy bên dưới Khi người dùng di chuột qua nút, hành vi mong muốn là màu nền chuyển sang màu đen, phông chữ chuyển sang màu trắng và hình ảnh cũng có màu trắng Trạng thái phần tử di chuột
Những phong cách này giải quyết hầu hết các thay đổi, nhưng chúng không tính đến sự thay đổi màu sắc của hình ảnh. Làm thế nào chúng ta có thể xử lý sự thay đổi dự kiến? Nếu nhóm sản phẩm đủ tử tế để cung cấp phiên bản màu trắng của hình ảnh, bạn có thể chỉ cần chuyển đổi .myButton:hover img{ 0 để đặt src của hình ảnh thành .myButton:hover img{ 2Điều này hoạt động, nhưng chúng tôi thực sự có thể hoàn thành nhiệm vụ này bằng CSS thuần túy. Tuy nhiên, điều này sẽ yêu cầu bao gồm một yếu tố khác để bọc hình ảnh trong. Bằng cách có một trình bao bọc cho hình ảnh, bạn có thể chỉ định thuộc tính .myButton:hover img{ 3 hoặc là .myButton:hover img{ 2 hoặc là white.png tùy thuộc vào việc bạn có di chuột qua nó hay khôngĐể biết thêm về cách sử dụng CSS để thay đổi Mặc dù giải pháp này hoạt động, nhưng bạn vẫn cần thêm nhiều HTML hơn và nó chỉ hoạt động nếu bạn đủ may mắn để có được nội dung thứ hai. Điều gì sẽ xảy ra nếu bạn chỉ muốn sử dụng CSS, không có đánh dấu bổ sung và bạn không muốn phải phụ thuộc vào nhóm sản phẩm để có một nội dung khác? . Có, nó có thể Với thuộc tính CSS .myButton:hover img{ 7, thật dễ dàng để lấy hình ảnh hiện có của chúng tôi và thay đổi màu sắc của nó để phù hợp với nhu cầu hiện tại của chúng tôi. Tất cả những gì chúng ta cần sử dụng là thang độ xám đầy đủ và đảo ngược hoàn toàn. Xem bên dưới.myButton:hover img{ thang độ xám .myButton:hover img{ 8 là một hàm CSS giúp chuyển đổi hình ảnh được cung cấp thành thang độ xám, với .myButton:hover img{ 9 là ảnh gốc (không thay đổi thang độ xám) và background-color 0 là thang độ xám hoàn chỉnh (làm cho ảnh trông đen trắng hơn). Tuy nhiên, việc cung cấp thang độ xám cho hình ảnh màu đen sẽ không làm cho hình ảnh có màu trắng. Màu tối gần với màu đen hơn, trong khi màu sáng gần với màu trắng hơn. Vì vậy, việc gán thang độ xám của _______75_______0 cho một hình ảnh màu đen là gần như dư thừa (chúng ta sẽ làm điều đó ngay lập tức). Điều này đưa chúng ta đến chức năng CSS tiếp theo cho .myButton:hover img{ 7Đảo ngược
.myButton:hover img{ 9 là màu gốc và background-color 0 là màu ngược lại. Được sử dụng cùng với background-color 6, chúng tôi có thể đảm bảo hình ảnh tối nhất có thể, sau đó đảo ngược tỷ lệ cuối cùng để làm cho hình ảnh càng sáng (trong trường hợp này là màu trắng) càng tốtTrong trường hợp hiện tại của chúng tôi, bạn thực sự có thể thoát khỏi việc sử dụng .myButton:hover img{ Vì nội dung ban đầu của chúng ta là màu đen nên chúng ta không cần sử dụng Trong hộp cát mã được cung cấp bên dưới, bạn có thể thấy cách thức hoạt động của Nâng cấp tư cách thành viên Phương tiện miễn phí của bạn lên tư cách thành viên trả phí tại đây và chỉ với 5 đô la/tháng, bạn sẽ có những câu chuyện không giới hạn, không có quảng cáo từ hàng nghìn nhà văn. Đây là một liên kết liên kết và một phần tư cách thành viên của bạn giúp tôi được thưởng cho nội dung tôi tạo. Cảm ơn Tôi có thể thay đổi màu PNG trong CSS không?Cho một hình ảnh và nhiệm vụ là thay đổi màu của hình ảnh bằng CSS. Sử dụng chức năng lọc để thay đổi màu ảnh png . Thuộc tính bộ lọc chủ yếu được sử dụng để đặt hiệu ứng hình ảnh cho hình ảnh.
Làm cách nào để thay đổi màu hình ảnh bằng bộ lọc CSS?Để làm như vậy, chúng ta sẽ làm theo cú pháp đã cho. . lọc. nâu đỏ(). hue-rotate(). bão hòa () Thay đổi màu của hình ảnh thành màu xanh lam.img { bộ lọc. nâu đỏ (100%) màu sắc xoay (190 độ) bão hòa (900%);. Thay đổi màu của hình ảnh thành xanh nhạt.img { bộ lọc. nâu đỏ (300%) màu sắc xoay (150 độ) bão hòa (450%); Làm cách nào để thay đổi màu nền của hình ảnh trong CSS?Làm cách nào để thay đổi màu nền trong CSS? . yếu tố { màu nền. tên_màu. trong suốt. ban đầu. thừa kế; Bạn có thể thay đổi hình ảnh trong CSS không?Bạn chỉ cần sử dụng thuộc tính hình nền CSS kết hợp với. giả lớp di chuột để thay thế hoặc thay đổi hình ảnh khi di chuột qua . |