Lưu ý rằng chúng tôi vẫn đang tải một hình ảnh lớn và chỉ thu nhỏ hình ảnh trong trình duyệt, điều này không lý tưởng cho thời gian tải trang nhanh hoặc kích thước trang thấp hơn. Hãy xem cách ImageKit có thể được sử dụng để giải quyết vấn đề này và cũng có thể tạo lại các hiệu ứng hình ảnh CSS với nó
Tạo hiệu ứng hình ảnh CSS thú vị với ImageKit
ImageKit. io là một dịch vụ phân phối và quản lý phương tiện hoàn chỉnh cung cấp khả năng tối ưu hóa hình ảnh thông minh theo thời gian thực, thay đổi kích thước hình ảnh, cắt xén và các phép biến đổi khác
Các chuyển đổi và tối ưu hóa thời gian thực của ImageKit giúp chúng tôi cung cấp các hình thu nhỏ hình ảnh cách điệu trên tất cả các nền tảng. Bạn cũng có thể sử dụng những hình ảnh này trong các email không hỗ trợ CSS mở rộng
Phần này sẽ trình bày cách sử dụng ImageKit để đạt được một số hiệu ứng được triển khai với CSS thông thường ở trên
Hiệu ứng thang độ xám của hình ảnh với ImageKit
Có thể dễ dàng đạt được hiệu ứng thang độ xám của hình ảnh với ImageKit bằng cách thêm trực tiếp tham số chuyển đổi border-radius: 15px 15px 15px 15px;0 vào URL hình ảnh như được hiển thị bên dưới
img { -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */ filter: grayscale(100%); }4Không giống như hình ảnh được chuyển đổi thành thang độ xám trong trình duyệt bằng CSS, hình ảnh được phân phối từ URL hình ảnh ở trên là thang độ xám theo mặc định
.