Bộ lọc css hình ảnh màu đỏ
Bộ lọc phông nền hiện đang được nung ở bên dưới Bộ lọc CSS Cấp 2 và tại thời điểm hiện tại của bài viết, nó chỉ hoạt động trong Safari 9 với tiền tố
8 và Chrome cũng như Opera bằng cách kích hoạt “Tính năng nền tảng web thử nghiệm”
Sử dụng Bộ lọc phông nền
Bộ lọc phông nền được thêm vào như là một phần của bộ lọc CSS được mô tả và vì vậy, cũng giống như thuộc tính
1
0, nó thừa kế tất cả những chức năng lọc tương tự như có hạn như
1
1,
1
2, và
1
3. Sự khác biệt duy nhất ở đây là nó sẽ tác động lên các yếu tố bên dưới của các phần tử được lựa chọn
Để sử dụng nó, chúng ta sẽ cần ít nhất hai thành phần; . Ví dụ
1
2
Thiết lập nền trong phần tử đầu tiên với độ trong suốt thấp vì vậy chúng ta có thể thêm
1
4 bằng một hàm, ví dụ, 1
1 để chuyển sang nền trắng và đen
1
32
5
6
7
0
1
2
3Lưu ý trong bản demo sau đây các phần tử con của phần tử
1
6 [một nút trong trường hợp này] vẫn còn rõ nét cho dù hàm bổ sung 1
2. Đây là một điểm mạnh mà 1
4 có thuộc tính 1
0; Lưu ý. hình ảnh ở đây được lấy từ bài hướng dẫn Cách tạo hình minh họa truyện cổ tích lấy cảm hứng từ cô bé quàng khăn đỏ trong Paint Tool SAI
Kết hợp nhiều bộ lọc
Kết hợp hai chức năng lọc trong một định nghĩa cũng được chấp nhận. Ví dụ, giữ nguyên
1
2 của chúng ta, nhưng thêm hàm 1
1 để tách phông nền1
32
7
6
9
0
1
2
3
Các hàm khác mà bạn có thể thêm vào hỗn hợp bao gồm
32. nhận một số con số từ 0 đến vô cùng, hoặc phần trăm. Bất kỳ số nào dưới
33, ví dụ như
34, sẽ làm tối đa các phần tử, và thiết lập bất kỳ số nào trên
33 sẽ làm sáng các phần tử
36. nhận một số và phần trăm tỷ lệ phần trăm, làm việc tương tự như hàm
32, ngoại trừ hàm này để xác định mức độ tương phản của phần tử
38. chức năng tạo ra những màu sắc đối nghịch hoặc tiêu cực như vậy với phông nền. Tương tự như vậy, các hàm cũng chấp nhận giá trị là một con số và tỷ lệ phần trăm
Bộ lọc nâng cao với SVG
Nếu bạn không thể tìm thấy hiệu ứng mong muốn từ các hàm mặc định, bạn luôn có thể thêm một bộ lọc nâng cao hơn thông qua SVG. Tạo một bộ lọc SVG với một ID duy nhất và lưu nó trong một tập tin
391
2
52
2
7
62
9Tham chiếu đến bộ lọc với hàm
2
0, như sau1
32
3
6
5
0
3
Thật không thể, hãy thêm bộ lọc với hàm
2
0 có vẻ như không hoạt động trong quá trình duyệt ở thời điểm hiện tại. Nhưng khi cài đặt đúng, hình ảnh sẽ trông như thế nàyBộ lọc biến tùy chỉnh với SVGCần xây dựng những gì?
Hiện có một số cài đặt thực tế trên các trang web mà chúng tôi có thể áp dụng bộ lọc phông nền một cách có ý nghĩa hơn là chỉ là một trang trí. Một ví dụ hay là Trung bình, làm mờ ảnh theo dõi của bài viết cũng như các hình ảnh trong nội dung bài viết trước khi hình ảnh được tải đầy đủ
Hiệu ứng mờ ảnh trong Trung bình. comMột ví dụ thực tế khác là Facebook, nó cũng làm mờ các tấm ảnh người lớn, không phù hợp hoặc nội dung gây rối, trước khi người dùng đồng ý xem đầy đủ hình ảnh
Facebook làm mờ một tấm bảng thuộc phạm vi hướng dẫn Tiêu chuẩn cộng đồng của FacebookKết luận
Trong những năm qua, CSS đã được cải tiến bằng các đặc tả kỹ thuật mới cho phép nhà thiết kế xây dựng giao diện hấp dẫn hơn trên web. Chuyển đổi, chuyển tiếp và hoạt ảnh đã được cài đặt đầy đủ và bây giờ là Bộ lọc phông nền cũng đang hướng đến chúng ta
Cho dù nó có thể còn quá sớm để sử dụng bộ lọc phông nền trong sản phẩm, thì những bản demo này chỉ ra rằng chúng ta sẽ sớm có thể áp dụng bộ lọc hiệu ứng vào các phần tử theo cách đơn giản hơn và cuối cùng là ít . Đến lúc đó, hãy theo dõi trang Blog của Webkit để cập nhật về điều này và các dự án khác