Ghi chú. Giá trị mặc định là
img.sepia {
filter: url[sepia.svg#old-timey];
-webkit-filter: sepia[1];
-webkit-filter: sepia[100%];
filter: sepia[100%];
background-color: #5E2612;
filter: alpha[opacity = 50];
zoom:1;
}
2 hoặc img.sepia {
filter: url[sepia.svg#old-timey];
-webkit-filter: sepia[1];
-webkit-filter: sepia[100%];
filter: sepia[100%];
background-color: #5E2612;
filter: alpha[opacity = 50];
zoom:1;
}
3 biến phần tử thành màu nâu đỏ. Giá trị của img.sepia {
filter: url[sepia.svg#old-timey];
-webkit-filter: sepia[1];
-webkit-filter: sepia[100%];
filter: sepia[100%];
background-color: #5E2612;
filter: alpha[opacity = 50];
zoom:1;
}
4 và img.sepia {
filter: url[sepia.svg#old-timey];
-webkit-filter: sepia[1];
-webkit-filter: sepia[100%];
filter: sepia[100%];
background-color: #5E2612;
filter: alpha[opacity = 50];
zoom:1;
}
5 sẽ giữ nguyên phần tử. Giá trị âm cũng như giá trị lớn hơn img.sepia {
filter: url[sepia.svg#old-timey];
-webkit-filter: sepia[1];
-webkit-filter: sepia[100%];
filter: sepia[100%];
background-color: #5E2612;
filter: alpha[opacity = 50];
zoom:1;
}
2 hoặc img.sepia {
filter: url[sepia.svg#old-timey];
-webkit-filter: sepia[1];
-webkit-filter: sepia[100%];
filter: sepia[100%];
background-color: #5E2612;
filter: alpha[opacity = 50];
zoom:1;
}
3 không được phép Trước đây, tôi đã thảo luận về khái niệm bộ lọc CSS và hướng dẫn bạn chuyển đổi hình ảnh thành đen trắng bằng CSS mà không cần tạo phiên bản mới. Chúng ta có thể sử dụng phương pháp tương tự để tạo tông màu nâu đỏ cho ảnh, để có hiệu ứng ảnh xưa cũ
HTML cho ví dụ này là một hình ảnh với một lớp đính kèm
Sử dụng bộ lọc CSS là cách tiếp cận dễ dàng nhất
img.sepia {
filter: sepia[100%];
}
Điều đó bao gồm tất cả các trình duyệt hiện đại trên máy tính để bàn và thiết bị di động. Để bao gồm các phiên bản Firefox trước v35, chúng tôi viết một bộ lọc SVG riêng
Lưu mã này vào một tệp có tên nâu đỏ. svg cho phép chúng tôi tham chiếu nó trong CSS của chúng tôi. Đồng thời, tôi sẽ viết hỗ trợ cho các phiên bản trình duyệt cũ hơn khác
img.sepia {
filter: url[sepia.svg#old-timey];
-webkit-filter: sepia[1];
-webkit-filter: sepia[100%];
filter: sepia[100%];
background-color: #5E2612;
filter: alpha[opacity = 50];
zoom:1;
}
Thật không may, không có bộ lọc màu nâu đỏ rõ ràng cho Internet Explorer, vì vậy chúng tôi phải giả mạo nó bằng cách đặt màu nâu đỏ phía sau hình ảnh và làm cho hình ảnh hơi trong suốt, hạn chế những thay đổi này đối với IE 9 trở về trước [như tôi đã thảo luận trong các bài viết trước, IE 10
Ryan Boudreaux minh họa một số ứng dụng của các hiệu ứng bộ lọc CSS3 khác nhau, bao gồm hiệu ứng thang độ xám, nâu đỏ, bão hòa và kết hợp
thang độ xám
Việc đặt thang độ xám cho hình ảnh được thực hiện theo tỷ lệ phần trăm như trong đoạn mã CSS mẫu bên dưới và so sánh song song như được hiển thị trong Hình B [Google Chrome Phiên bản 22. 0. 1229. 94 mét]
Thang độ xám được đặt thành năm mươi phần trăm
/* Grayscale Filter Effect */______5
-webkit-filter: grayscale[50%];
}
Hình B
Huế xoay
Đặt xoay màu sắc là hiệu ứng bộ lọc để thay đổi màu sắc của hình ảnh bằng cách xoay các giá trị RGBA xung quanh ma trận màu. Cài đặt được thực hiện với cài đặt mức độ xoay từ 0 độ đến 360 độ. Ví dụ xoay màu sắc được hiển thị trong đoạn mã CSS ví dụ bên dưới và so sánh song song như được hiển thị trong Hình C
Xoay Huế được đặt thành 180 độ
/* Hue Rotation Filter Effect */____9
img.sepia {
filter: sepia[100%];
}
0}
Hình C
Đảo ngược
Hiệu ứng bộ lọc đảo ngược đảo ngược các giá trị màu sắc, độ bão hòa và độ sáng của nội dung của đối tượng và được biểu thị dưới dạng phần trăm. Ví dụ đảo ngược được hiển thị trong đoạn mã CSS mẫu bên dưới và so sánh song song như được hiển thị trong Hình D
Đảo ngược được đặt thành 100%
img.sepia {
filter: sepia[100%];
}
2____13____50____7Hình dung
độ mờ
Hiệu ứng bộ lọc độ mờ được đo bằng mức độ từ hoàn toàn trong suốt đến hoàn toàn mờ đục và được đo từ 0 đến 100, với 0 là hoàn toàn trong suốt và 100 là hoàn toàn mờ đục. Ví dụ về độ mờ được hiển thị trong đoạn mã CSS bên dưới và so sánh song song như được hiển thị trong Hình E
Độ mờ được đặt thành năm mươi phần trăm
.grayscale {2
.grayscale {3
.grayscale {4
}
Hình E
bão hòa
Bộ lọc bão hòa được sử dụng để thay đổi cường độ màu trong phần tử. Một yếu tố bão hòa có màu sắc quá tươi sáng; . Lượng bão hòa có thể được biểu thị bằng tỷ lệ phần trăm, trong đó giá trị 0% là hoàn toàn không bão hòa và giá trị 100% khiến đầu vào không thay đổi. Các giá trị trên 100% làm tăng mức độ bão hòa. Ví dụ này cho thấy mức độ bão hòa cho hình ảnh bên phải được đặt thành 250% như được hiển thị trong Hình F như được hiển thị trong Google Chrome Phiên bản 22. 0. 1229. 94 mét
Đoạn mã CSS
.grayscale {6
.grayscale {7____58
}
Hình F
màu nâu đỏ
Hiệu ứng bộ lọc nâu đỏ là tông màu nâu xám đến nâu vàng đậm được truyền cho một phần tử và được biểu thị bằng tỷ lệ phần trăm từ 0% đến 100%. Ví dụ được hiển thị bên dưới hiển thị hiệu ứng bộ lọc CSS3 sepia trên hình ảnh bên phải với cài đặt 100%
-webkit-filter: grayscale[50%];0
-webkit-filter: grayscale[50%];1
-webkit-filter: grayscale[50%];2
}
Hình G
Kết hợp các hiệu ứng
Bạn cũng có thể kết hợp các hiệu ứng bộ lọc với kết quả rất tốt;
Hiệu ứng kết hợp đen trắng
Sử dụng kết hợp các hiệu ứng bộ lọc CSS sau đây sẽ tạo ra hiệu ứng đen trắng sắc nét như thể hiện trong Hình H
-webkit-filter: grayscale[50%];4
-webkit-filter: grayscale[50%];5____66
}
Hình H
hỗ trợ trình duyệt
Như bạn có thể nhận thấy từ tiền tố nhà cung cấp trong đoạn mã CSS, Webkit hiện là công cụ bố cục được hỗ trợ duy nhất cho các hiệu ứng bộ lọc CSS. WebKit hỗ trợ trình duyệt Apple Safari và Google Chrome. Có thể tìm thấy hỗ trợ tác nhân người dùng và trình duyệt hiện tại từ bảng “Tôi có thể sử dụng…” cho Hiệu ứng bộ lọc CSS3;
Đừng vội cất phần mềm chỉnh sửa hình ảnh đó đi;