Bộ lọc CSS là một công cụ mạnh mẽ mà các tác giả có thể sử dụng để đạt được các hiệu ứng hình ảnh khác nhau (giống như bộ lọc Photoshop cho trình duyệt). filterThuộc tính CSS cung cấp quyền truy cập vào các hiệu ứng như làm mờ hoặc chuyển màu trên kết xuất của một phần tử trước khi phần tử đó được hiển thị. Bộ lọc thường được sử dụng để điều chỉnh kết xuất hình ảnh, nền hoặc đường viền.
Cú pháp là:
.filter-me ( filter: blur(3px); filter: grayscale(1); filter: saturate(2.2); filter: none; /* remove existing filter */ )Có một số hàm để sử dụng cho giá trị:
blur()brightness()contrast()drop-shadow()grayscale()hue-rotate()invert()opacity()saturate()sepia()url()- để áp dụng bộ lọc SVGcustom()- "Sắp có"
Có thể sử dụng nhiều chức năng, ngăn cách không gian.
.do-more-things ( filter: blur(20px) grayscale(20%); )Chức năng lọc
Để sử dụng thuộc tính bộ lọc CSS, bạn chỉ định giá trị cho một trong các hàm sau được liệt kê ở trên. Nếu giá trị không hợp lệ, hàm trả về "không". Ngoại trừ khi được lưu ý, các hàm nhận giá trị được biểu thị bằng dấu phần trăm (như trong 34%) cũng chấp nhận giá trị được biểu thị dưới dạng số thập phân (như trong 0,34).
Đây là bản demo cho phép bạn chơi với các bộ lọc riêng lẻ một chút:
thang độ xám ()
filter: grayscale(20%) /* same as… */ filter: grayscale(0.2);Chuyển đổi hình ảnh đầu vào thành thang độ xám. Giá trị của "số tiền" xác định tỷ lệ chuyển đổi. Giá trị 100% hoàn toàn là thang độ xám. Giá trị 0% không thay đổi đầu vào. Các giá trị từ 0% đến 100% là hệ số nhân tuyến tính đối với hiệu ứng. Nếu thông số "số tiền" bị thiếu, giá trị 100% sẽ được sử dụng. Giá trị âm không được phép.
nâu đỏ ()
filter: sepia(0.8); /* same as… */ filter: sepia(80%);Chuyển đổi hình ảnh đầu vào sang màu nâu đỏ. Giá trị của "số tiền" xác định tỷ lệ chuyển đổi. Giá trị 100% là màu nâu đỏ hoàn toàn. Giá trị 0 giữ nguyên giá trị đầu vào. Các giá trị từ 0% đến 100% là hệ số nhân tuyến tính đối với hiệu ứng. Nếu thông số "số tiền" bị thiếu, giá trị 100% sẽ được sử dụng. Giá trị âm không được phép.
bão hòa ()
filter: saturate(2); /* same as… */ filter: sature(200%);Bão hòa hình ảnh đầu vào. Giá trị của "số tiền" xác định tỷ lệ chuyển đổi. Giá trị 0% là hoàn toàn không bão hòa. Giá trị 100% không thay đổi đầu vào. Các giá trị khác là số nhân tuyến tính đối với hiệu ứng. Giá trị trên 100% được cho phép, cung cấp kết quả siêu bão hòa. Nếu thông số "số tiền" bị thiếu, giá trị 100% sẽ được sử dụng. Giá trị âm không được phép.
hue-xoay ()
filter: hue-rotate(180deg); /* same as… */ filter: hue-rotate(0.5turn);Áp dụng xoay màu trên hình ảnh đầu vào. Giá trị của "angle" xác định số độ xung quanh vòng tròn màu mà các mẫu đầu vào sẽ được điều chỉnh. Giá trị 0deg không thay đổi đầu vào. Nếu thông số "angle" bị thiếu, giá trị của 0degsẽ được sử dụng. Giá trị lớn nhất là 360deg.
invert ()
filter: invert(100%);Đảo ngược các mẫu trong hình ảnh đầu vào. Giá trị của "số tiền" xác định tỷ lệ chuyển đổi. Giá trị 100% bị đảo ngược hoàn toàn. Giá trị 0% không thay đổi đầu vào. Các giá trị từ 0% đến 100% là hệ số nhân tuyến tính đối với hiệu ứng. Nếu thông số "số tiền" bị thiếu, giá trị 100% sẽ được sử dụng. Giá trị âm không được phép.
opacity ()
filter: opacity(0.5); /* same as… */ filter: opacity(50%);Áp dụng độ trong suốt cho các mẫu trong hình ảnh đầu vào. Giá trị của "số tiền" xác định tỷ lệ chuyển đổi. Giá trị 0% là hoàn toàn trong suốt. Giá trị 100% không thay đổi đầu vào. Các giá trị từ 0% đến 100% là hệ số nhân tuyến tính đối với hiệu ứng. Điều này tương đương với việc nhân các mẫu hình ảnh đầu vào với số lượng. Nếu thông số "số tiền" bị thiếu, giá trị 100% sẽ được sử dụng. Chức năng này tương tự như thuộc tính opacity được thiết lập nhiều hơn; sự khác biệt là với các bộ lọc, một số trình duyệt cung cấp khả năng tăng tốc phần cứng để có hiệu suất tốt hơn. Giá trị âm không được phép.
độ sáng()
filter: brightness(0.5); /* same as… */ filter: brightness(50%);Áp dụng hệ số nhân tuyến tính cho hình ảnh đầu vào, làm cho hình ảnh có vẻ sáng hơn hoặc ít hơn. Giá trị 0% sẽ tạo ra hình ảnh có màu đen hoàn toàn. Giá trị 100% không thay đổi đầu vào. Các giá trị khác là số nhân tuyến tính đối với hiệu ứng. Giá trị trên 100% được phép, mang lại kết quả sáng sủa hơn. Nếu thông số "số tiền" bị thiếu, giá trị 100% sẽ được sử dụng.
tương phản()
filter: contrast(4); /* same as… */ filter: contrast(400%);Điều chỉnh độ tương phản của đầu vào. Giá trị 0% sẽ tạo ra hình ảnh có màu đen hoàn toàn. Giá trị 100% không thay đổi đầu vào. Giá trị trên số lượng trên 100% được cho phép, cung cấp kết quả có độ tương phản thấp hơn. Nếu thông số "số tiền" bị thiếu, giá trị 100% sẽ được sử dụng.
mơ hồ()
filter: blur(5px); filter: blur(1rem);Áp dụng hiệu ứng mờ Gaussian cho hình ảnh đầu vào. Giá trị của 'radius' xác định giá trị của độ lệch chuẩn đối với hàm Gaussian, hoặc có bao nhiêu pixel trên màn hình hòa trộn vào nhau, vì vậy giá trị lớn hơn sẽ tạo ra nhiều vết mờ hơn. Nếu không có tham số nào được cung cấp thì giá trị 0 được sử dụng. Tham số được chỉ định dưới dạng độ dài CSS, nhưng không chấp nhận giá trị phần trăm.
bóng đổ ()
filter: drop-shadow((2,3) ?)Áp dụng hiệu ứng đổ bóng cho hình ảnh đầu vào. Bóng đổ thực sự là một phiên bản bù đắp, mờ của mặt nạ alpha của hình ảnh đầu vào được vẽ bằng một màu cụ thể, được kết hợp bên dưới hình ảnh. Hàm chấp nhận một tham số kiểu (được định nghĩa trong Nền CSS3), ngoại trừ từ khóa 'chèn' không được phép.
Chức năng này tương tự như thuộc tính box-shadow được thiết lập nhiều hơn; sự khác biệt là với các bộ lọc, một số trình duyệt cung cấp khả năng tăng tốc phần cứng để có hiệu suất tốt hơn.
Drop-shadow cũng bắt chước các đối tượng dự định phác thảo một cách tự nhiên không giống như box-shadowchỉ coi hộp là đường dẫn của nó.
Cũng giống như với text-shadow, không có tham số 'spread' để tạo ra một bóng mờ lớn hơn đối tượng.
url ()
filter: url()Các url()chức năng mất vị trí của một tập tin XML chỉ rõ một bộ lọc SVG, và có thể bao gồm một neo vào một yếu tố cụ thể lọc. Đây là một hướng dẫn hoạt động như một phần giới thiệu tốt về bộ lọc SVG với một bản demo thú vị.
Bộ lọc hoạt hình
Vì Bộ lọc có thể hoạt hình hóa nên nó có thể mở ra cánh cửa cho nhiều niềm vui.
Ghi chú
Bạn có thể kết hợp bất kỳ số chức năng nào để thao tác kết xuất, nhưng thứ tự vẫn quan trọng (tức là sử dụng grayscale()after sepia()sẽ dẫn đến đầu ra hoàn toàn màu xám).
Giá trị được tính toán khác với giá trị “không” dẫn đến việc tạo bối cảnh xếp chồng giống như cách mà độ mờ CSS thực hiện. Thuộc tính bộ lọc không ảnh hưởng đến hình dạng của mô hình hộp của phần tử mục tiêu, ngay cả khi các bộ lọc có thể gây ra sơn bên ngoài hộp viền của phần tử. Bất kỳ phần nào của phần tử đích đều bị ảnh hưởng bởi các chức năng của bộ lọc. Điều này bao gồm mọi nội dung, nền, đường viền, trang trí văn bản, đường viền và cơ chế cuộn hiển thị của phần tử mà bộ lọc được áp dụng và các phần tử con của nó. Bộ lọc cũng có thể được áp dụng cho nội dung nội tuyến, chẳng hạn như các khoảng văn bản riêng lẻ.
Đặc tả cũng giới thiệu một filter(image-URL, filter-functions)chức năng bao bọc cho một hình ảnh. Nó sẽ cho phép bạn lọc bất kỳ hình ảnh nào tại thời điểm bạn sử dụng nó trong CSS. Ví dụ: bạn có thể làm mờ hình nền mà không làm mờ văn bản. Chức năng bộ lọc này chưa được hỗ trợ trong các trình duyệt. Trong khi chờ đợi, bạn có thể áp dụng cả nền và bộ lọc cho phần tử giả để tạo hiệu ứng tương tự.
Công cụ lọc độc quyền của IE
Cũng đã sử dụng thuộc filtertính, như:
.half-opacity ( -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; filter: alpha(opacity=50); )Chủ yếu được sử dụng để tạo độ mờ khi bạn cần hỗ trợ IE 8 trở xuống.
Thêm thông tin
- Đặc điểm kỹ thuật hiệu ứng bộ lọc W3C
- http://html5-demos.appspot.com/static/css/filters/index.html
- Thư viện Bộ lọc của Bennett Feely
- Tài liệu MDN
- Tôi có thể sử dụng
- http://www.broken-links.com/2013/11/20/cross-browser-filters-css-svg
- https://github.com/Schepp/CSS-Filters-Polyfill
- Hiểu các hiệu ứng bộ lọc CSS
Hỗ trợ trình duyệt
Dữ liệu hỗ trợ trình duyệt này là từ Caniuse, có nhiều chi tiết hơn. Một con số cho biết rằng trình duyệt hỗ trợ tính năng ở phiên bản đó trở lên.
Máy tính để bàn
| Trình duyệt Chrome | Firefox | I E | Cạnh | Safari |
|---|---|---|---|---|
| 18 * | 35 | Không | 79 | 6 * |
Di động / Máy tính bảng
| Chrome dành cho Android | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 4,4 * | 6,0-6,1 * |