Đây là kết quả của bài viết này:
Hãy bắt đầu!
Thay đổi màu hình ảnh trong CSS
Để thay đổi màu sắc của hình ảnh trong CSS, trước tiên hãy tìm hiểu về thuộc tính bộ lọc và các chức năng của nó. Bạn sẽ hiểu rõ hơn theo cách này.
lọc Thuộc tính CSS
Để kiểm soát hiệu ứng hình ảnh của một thuộc tính bộ lọc hình ảnh của CSS được sử dụng. Hiệu ứng hình ảnh là:
- mơ hồ
- độ sáng
- điều chỉnh màu sắc
- bóng đổ
- sự mờ đục
Cú pháp của thuộc tính bộ lọc
Cú pháp của thuộc tính bộ lọc là:
lọc : mơ hồ ( ) | bóng đổ ( ) | sự mờ đục ( )- mơ hồ(): được sử dụng để áp dụng hiệu ứng mờ trên hình ảnh.
- drop-shadow (): tạo bóng trên một hình ảnh.
- opacity (): được sử dụng để thêm độ trong suốt cho hình ảnh.
Chúng tôi có thể sử dụng nhiều bộ lọc bằng cách sử dụng thuộc tính bộ lọc này. Bài viết này nói về cách thay đổi màu sắc của hình ảnh, vì vậy ở đây chúng tôi sẽ giải thích cách sử dụng các hàm drop-shadow () và opacity () với nó.
bóng đổ ()
drop-shadow () là một hàm tích hợp của CSS cho phép thiết lập bóng cho bất kỳ phần tử hoặc hình ảnh nào. Các tham số sau được sử dụng trong hàm drop-shadow () để thay đổi màu sắc của hình ảnh:
- offset-x: Nó được sử dụng để thêm bóng ngang.
- offset-y: Bóng được thêm theo chiều dọc bằng cách sử dụng này.
- màu sắc: Bóng đổ được tô màu với tham số này.
Để làm rõ những điểm này, hãy chuyển sang cú pháp của drop-shadow:
bóng đổ ( màu offset-x offset-y )- offset-x và offset-y có thể dương hoặc âm.
- Theo chiều ngang, giá trị dương được sử dụng để thêm các hiệu ứng ở phía bên phải và giá trị âm dành cho phía bên trái.
- Theo chiều dọc, giá trị dương là cho cạnh dưới và giá trị âm cho trên cùng.
- Ở vị trí của màu sắc, bạn có thể gán bất kỳ màu nào bạn muốn cho hình ảnh.
opacity ()
opacity () được sử dụng để thêm độ trong suốt cho một phần tử hoặc bất kỳ hình ảnh nào. Cú pháp của opacity () là:
sự mờ đục ( con số ) ;Nơi đây “ con số ” tôi s được sử dụng để đặt mức độ mờ từ 0,0 đến 1,0. Để làm cho hình ảnh hoàn toàn trong suốt, bạn có thể đặt nó là 0,0.
Để làm rõ những điểm đã đề cập ở trên, hãy chuyển sang ví dụ.
Làm thế nào để thay đổi màu hình ảnh trong CSS?
Trong ví dụ dưới đây, trước tiên, chúng ta sẽ thêm một hình ảnh bằng thẻ :
< img lớp = 'hình ảnh' src = 'image.jpg' mọi điều = '' >
< / thân hình >
Trước khi áp dụng thuộc tính bộ lọc, kết quả như sau:
Để thay đổi màu sắc của hình ảnh, hãy chuyển sang CSS và áp dụng thuộc tính bộ lọc cho nó. Chúng tôi sẽ đặt độ mờ là 0,5 cho độ trong suốt của hình ảnh. Trong hàm drop-shadow (), giá trị của offset-x và offset-y là 0 vì chúng ta chỉ muốn thay đổi màu sắc của hình ảnh.
.hình ảnh {lọc : sự mờ đục ( 0,5 ) bóng đổ ( 0 0 nâu ) ;
}
Đây là kết quả cuối cùng sau khi thực hiện:
Màu của hình ảnh đã được thay đổi thành công.
Sự kết luận
Để sửa đổi màu sắc của hình ảnh, hai hàm CSS: opacity () và drop-shadow () được sử dụng với thuộc tính bộ lọc. opacity () chỉ định độ trong suốt của hình ảnh và drop-shadow () chỉ định màu và bóng cho hình ảnh. Bài viết này giải thích phương pháp thay đổi màu sắc của hình ảnh bằng cách sử dụng CSS.