Cách thay đổi màu hình ảnh png khi di chuột bằng css

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 đầu

CSS 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

Các thay đổi của

.myButton:hover img{
   -webkit-filter: invert(1);
   filter: invert(1);
}

1,

.myButton:hover img{
   -webkit-filter: invert(1);
   filter: invert(1);
}

2 và

.myButton:hover img{
   -webkit-filter: invert(1);
   filter: invert(1);
}

3 khi người dùng di chuột qua nút rất đơn giản. Bạn có thể khai báo các kiểu được cập nhật này trong bộ chọn

.myButton:hover img{
   -webkit-filter: invert(1);
   filter: invert(1);
}

4 trong biểu định kiểu của mình

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 chỉ cần chuyển đổi

.myButton:hover img{
   -webkit-filter: invert(1);
   filter: invert(1);
}

5 của hình ảnh khi di chuột. Điều này có thể được thực hiện bằng cách sử dụng JavaScript. Bạn có thể sử dụng hàm

.myButton:hover img{
   -webkit-filter: invert(1);
   filter: invert(1);
}

6 để đặt

.myButton:hover img{
   -webkit-filter: invert(1);
   filter: invert(1);
}

5 của hình ảnh thành

.myButton:hover img{
   -webkit-filter: invert(1);
   filter: invert(1);
}

8 và sau đó là hàm

.myButton:hover img{
   -webkit-filter: invert(1);
   filter: invert(1);
}

0 để đặt

.myButton:hover img{
   -webkit-filter: invert(1);
   filter: invert(1);
}

5 của hình ảnh thành

.myButton:hover img{
   -webkit-filter: invert(1);
   filter: invert(1);
}

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{
   -webkit-filter: invert(1);
   filter: invert(1);
}

3 là

.myButton:hover img{
   -webkit-filter: invert(1);
   filter: invert(1);
}

2 hoặc

.myButton:hover img{
   -webkit-filter: invert(1);
   filter: invert(1);
}

8 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

.myButton:hover img{
   -webkit-filter: invert(1);
   filter: invert(1);
}

5 của hình ảnh khi di chuột, hãy xem chủ đề này trên Stack Overflow

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{
   -webkit-filter: invert(1);
   filter: invert(1);
}

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{
   -webkit-filter: grayscale(1) invert(1);
   filter: grayscale(1) invert(1);
}

thang độ xám

.myButton:hover img{
   -webkit-filter: invert(1);
   filter: invert(1);
}

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{
   -webkit-filter: invert(1);
   filter: invert(1);
}

9 là ảnh gốc (không thay đổi thang độ xám) và

.myButton:hover img{
   -webkit-filter: invert(1);
   filter: invert(1);
}

10 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

.myButton:hover img{
   -webkit-filter: invert(1);
   filter: invert(1);
}

10 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{
   -webkit-filter: invert(1);
   filter: invert(1);
}

7

Đảo ngược

.myButton:hover img{
   -webkit-filter: invert(1);
   filter: invert(1);
}

13 là một hàm CSS giúp đảo ngược mẫu màu trong hình ảnh được cung cấp, với

.myButton:hover img{
   -webkit-filter: invert(1);
   filter: invert(1);
}

9 là màu gốc và

.myButton:hover img{
   -webkit-filter: invert(1);
   filter: invert(1);
}

10 là màu ngược lại. Được sử dụng cùng với

.myButton:hover img{
   -webkit-filter: invert(1);
   filter: invert(1);
}

16, 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 sáng nhất có thể (trong trường hợp này là màu trắng)

Trong 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 chỉ sử dụng

.myButton:hover img{
   -webkit-filter: invert(1);
   filter: invert(1);
}

17

.myButton:hover img{
   -webkit-filter: invert(1);
   filter: invert(1);
}

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

.myButton:hover img{
   -webkit-filter: invert(1);
   filter: invert(1);
}

16 để làm cho hình ảnh tối hơn (như đã đề cập trước đây, điều này hơi thừa). Một tình huống mà thang độ xám có thể có ý nghĩa hơn là khi bạn có một hình ảnh tương phản hoặc ít nhất là một hình ảnh không phải toàn màu đen/trắ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

.myButton:hover img{
   -webkit-filter: invert(1);
   filter: invert(1);
}

16 và

.myButton:hover img{
   -webkit-filter: invert(1);
   filter: invert(1);
}

17 trên một hình ảnh có nhiều màu hơn một chút (hoặc tôi dám nói là sự tinh tế)

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 bạn

Làm cách nào để thay đổi màu biểu tượng PNG khi di chuột bằng CSS?

Làm cách nào để thay đổi màu hình ảnh PNG bằng CSS?

Làm cách nào để thêm màu di chuột trong CSS hình ảnh?

Làm cách nào để thêm hình ảnh PNG trong CSS?