Tôi có thể thay đổi màu hình ảnh trong CSS không?

Đư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

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




<!-- HTML code to change the png image color 

        using filter property -->

<!DOCTYPE html> 

<html

    <<!-- HTML code to change the png image color 0

        16_______<!-- HTML code to change the png image color 4<!-- HTML code to change the png image color 5<!-- HTML code to change the png image color 4

        <        0

        2_______13_______3

        4        5

        2______13_______7

                9_______13_______0

            9_______12_______0

using filter property -->6

    <using filter property -->9

        16_______<!DOCTYPE html> 3<!DOCTYPE html> 4<!DOCTYPE html> 3

        <<!DOCTYPE html> 9 <0<1

<2

        16_______4<5_______16_______6 <7<5<9 html0<5html2 html3

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

Button icon

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

Button when user hovers over it

Trạng thái phần tử di chuột

background-color, colorborder thay đổi khi người dùng di chuột qua nút một cách đơ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 :hover 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 có thể chỉ cần chuyển đổi src 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 onmouseover để đặt src của hình ảnh thành white.png và sau đó là hàm

.myButton:hover img{
-webkit-filter: invert(1);
filter: invert(1);
}
0 để đặt src 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 hoặc là
.myButton:hover img{
-webkit-filter: invert(1);
filter: invert(1);
}
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 src 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à background-color0 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{
-webkit-filter: invert(1);
filter: invert(1);
}
7

Đảo ngược

background-color3 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à background-color0 là màu ngược lại. Được sử dụng cùng với background-color6, 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ốt

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 sử dụng background-color7 một mình

.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 background-color6 để 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 background-color6 và background-color7 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

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 .