Thuộc tính “bộ lọc” có thể được sử dụng để áp dụng các hiệu ứng hình ảnh khác nhau cho một hình ảnh, chẳng hạn như phản chiếu, thang độ xám, nâu đỏ, bão hòa, xoay màu sắc, v.v. Kết hợp các chức năng liên quan của các hiệu ứng hình ảnh được đề cập trong thuộc tính bộ lọc sẽ thay đổi màu sắc của hình ảnh. Các chức năng này sử dụng các thành phần màu khác nhau để sửa đổi màu của hình ảnh

Trong hướng dẫn này, bạn sẽ học cách sử dụng CSS để thay đổi màu của hình ảnh thành màu xanh lam

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

Trong CSS, bạn có thể sử dụng thuộc tính bộ lọc để áp dụng bất kỳ hiệu ứng đồ họa nào cho hình ảnh hoặc cho mục đích chuyển màu sang thành phần HTML. Hơn nữa, nó có thể được sử dụng để thay đổi màu sắc của hình ảnh. Vì vậy, trước tiên, hãy xem thuộc tính bộ lọc và các chức năng của nó

Thuộc tính bộ lọc CSS

Để kiểm soát hiệu ứng hình ảnh của hình ảnh, thuộc tính bộ lọc của CSS sẽ được sử dụng. Hiệu ứng hình ảnh được hỗ trợ của nó là

• • điều chỉnh màu sắc
  • mơ hồ
  • đổ bóng
  • độ sáng
  • độ mờ đục

cú pháp

Mục tiêu của chúng tôi là thay đổi màu của hình ảnh thành màu xanh lam trong CSS bằng cách sử dụng thuộc tính bộ lọc. Để làm như vậy, chúng tôi sẽ làm theo cú pháp đã cho

bộ lọc. nâu đỏ () . xoay màu sắc () . bão hòa ()

 
Mô tả các chức năng trên là

• • nâu đỏ(). Nó được sử dụng để chuyển đổi một hình ảnh thành hình ảnh màu nâu đỏ bằng cách tạo cho nó một diện mạo màu nâu/vàng
  • hue-rotate(). Nó được sử dụng để áp dụng xoay màu sắc cho hình ảnh. Hàm này chấp nhận góc quay cần thiết làm đối số
  • bão hòa (). Nó được sử dụng để đặt độ bão hòa trên hình ảnh. Hàm này chấp nhận một tỷ lệ phần trăm hoặc một số làm đối số biểu thị số tiền chuyển đổi

Để làm rõ các điểm nêu trên, hãy chuyển sang ví dụ

Hãy xem một ví dụ để thay đổi màu của hình ảnh thành màu xanh lam bằng cách sử dụng các hàm thuộc tính bộ lọc đã đề cập

Thí dụ. Làm cách nào để thay đổi màu của hình ảnh thành màu xanh lam trong CSS?

Để thay đổi màu của hình ảnh thành màu xanh lam, trước tiên, hãy chỉ định nguồn của hình ảnh đã chọn trong tệp HTML

Here, we have added an image using

Di chuyển đến CSS và áp dụng thuộc tính bộ lọc để thay đổi màu của hình ảnh thành màu xanh lam

Để làm như vậy, chúng tôi sẽ đặt giá trị của các hàm sepia(), hue-rotate() và saturate() lần lượt là “100%”, “190deg” và “900%”

img {
  bộ lọc. nâu đỏ (100%) hue-rotate(190deg) saturate(900%);
  }

 
Ghi chú. Trình tự của các chức năng được thêm vào phải giống như đã cho. Trong trường hợp bạn thay đổi trình tự đã chỉ định, thì hình ảnh sẽ không có hiệu ứng cần thiết

Bây giờ, hãy lưu mã của bạn và mở tệp HTML trong trình duyệt của bạn

ví dụ 2. Làm cách nào để thay đổi màu của hình ảnh thành màu xanh nhạt?

Để thay đổi màu sắc của hình ảnh thành màu xanh nhạt, giá trị của các hàm sepia(), hue-rotate() và saturate() sẽ được thay đổi

Here, we will add another image using the

Bây giờ, hãy chuyển đến phần CSS và áp dụng thuộc tính “bộ lọc” cho hình ảnh đã thêm

Ở đây, chúng ta sẽ đặt giá trị của sepia() là “300%”, hue-rotate() là “150deg” và saturate() là “450%”

img {
  bộ lọc. nâu đỏ (300%) hue-rotate(150deg) saturate(450%);
  }

 
Do đó, màu của hình ảnh đã cho sẽ bị đổi thành màu xanh nhạt

đầu ra

Chúng tôi đã đề cập đến phương pháp đơn giản nhất để thay đổi màu của hình ảnh thành màu xanh lam trong CSS

Phần kết luận

Để thay đổi màu của hình ảnh thành màu xanh lam, các hàm “sepia()”, “hue-rotate()” và “saturate()” của thuộc tính “filter” được sử dụng. Màu sắc của hình ảnh thay đổi theo giá trị đã cho của các hàm sepia(), hue-rotate(), và saturate(). Sử dụng tính năng này, bạn có thể đặt các màu khác nhau của hình ảnh, chẳng hạn như xanh dương và xanh lam nhạt. Như chúng tôi đã giải thích trong bài viết này, thuộc tính bộ lọc CSS cho phép bạn thay đổi màu của hình ảnh thành màu xanh lam

Làm cách nào để lọc màu trong CSS?

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

Làm cách nào để áp dụng bộ lọc trên CSS hình ảnh?

Bạn có thể tô màu hình ảnh trong CSS không?