Thuộc tính bộ lọc style

Định nghĩa và cách sử dụng

filter Thuộc tính thêm hiệu ứng trên hình ảnh (như mờ và độ饱和).

Xem thêm:

Tài liệu tham khảo CSS:Thuộc tính bộ lọc

Mô hình

Thay đổi màu sắc của hình ảnh thành đen trắng (100% độ xám):

document.getElementById("myImg").style.filter = "grayscale(100%)";

Thử ngay

Cú pháp

Trả về thuộc tính bộ lọc:

đối tượng.style.filter

Đặt thuộc tính bộ lọc:

đối tượng.style.filter = "none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia()"

Hàm bộ lọc

Ghi chú：Bộ lọc filter cũng chấp nhận giá trị thập phân (ví dụ 0.75) ngoài giá trị phần trăm (%) như (75%).

Bộ lọc Mô tả
none Định nghĩa không có hiệu ứng.
blur(px)

Áp dụng hiệu ứng mờ lên hình ảnh.

Nếu không quy định giá trị, sẽ sử dụng 0.
brightness(%)

Chỉnh sửa độ sáng của hình ảnh.

0% sẽ làm cho hình ảnh hoàn toàn chuyển thành đen.

100% (1) là giá trị mặc định, biểu thị hình ảnh gốc.

Giá trị trên 100% sẽ cung cấp kết quả sáng hơn.
contrast(%)

Chỉnh sửa độ tương phản của hình ảnh.

0% sẽ làm cho hình ảnh hoàn toàn chuyển thành đen.

100% (1) là giá trị mặc định, biểu thị hình ảnh gốc.

Giá trị trên 100% sẽ cung cấp kết quả tương đối thấp về độ tương phản.
drop-shadow(h-shadow v-shadow blur spread color)

Áp dụng hiệu ứng投sự影 lên hình ảnh.

Các giá trị có thể:

h-shadow - bắt buộc. Quy định giá trị pixel của bóng râm ngang. Giá trị âm sẽ đặt bóng râm ở bên trái của hình ảnh.

v-shadow - bắt buộc. Quy định giá trị pixel của bóng râm thẳng đứng. Giá trị âm sẽ đặt bóng râm trên hình ảnh.

blur - tùy chọn. Giá trị thứ ba, phải là đơn vị pixel. Thêm hiệu ứng mờ cho bóng râm. Giá trị lớn hơn sẽ tạo ra nhiều mờ hơn (bóng râm sẽ lớn hơn và sáng hơn). Không được phép sử dụng giá trị âm. Nếu không quy định giá trị, sẽ sử dụng 0 (cạnh bóng râm sẽ sắc nét).

spread - tùy chọn. Giá trị thứ tư, phải là đơn vị pixel. Giá trị dương sẽ làm bóng râm mở rộng và lớn hơn, giá trị âm sẽ làm bóng râm nhỏ hơn. Nếu không quy định, nó sẽ là 0 (bóng râm sẽ có cùng kích thước với phần tử).

Ghi chú：Chrome, Safari và Opera, có thể là các trình duyệt khác, không hỗ trợ chiều dài thứ 4; nếu thêm, nó sẽ không hiển thị.

color：tùy chọn. Thêm màu sắc cho bóng râm. Nếu không quy định, màu sắc phụ thuộc vào trình duyệt (thường là đen).

Lưu ý：Filter này tương tự như thuộc tính box-shadow.
grayscale(%)

Chuyển đổi hình ảnh thành màu xám.

0% (0) là giá trị mặc định, biểu thị hình ảnh gốc.

100% sẽ làm cho hình ảnh hoàn toàn chuyển thành màu xám (dùng cho hình ảnh đen trắng).

Ghi chú：Không cho phép giá trị âm.
hue-rotate(deg)

Áp dụng hiệu ứng xoay màu sắc trên hình ảnh. Giá trị này định nghĩa rằng mẫu hình ảnh sẽ được điều chỉnh xung quanh vòng màu sắc.

0deg là giá trị mặc định, biểu thị hình ảnh gốc.

Ghi chú：Giá trị lớn nhất là 360 độ.
invert(%)

Ngược lại các mẫu trong hình ảnh.

0% (0) là giá trị mặc định, biểu thị hình ảnh gốc.

100% sẽ làm cho hình ảnh hoàn toàn ngược lại.

Ghi chú：Không cho phép giá trị âm.
opacity(%)

Đặt mức độ không trong suốt của hình ảnh. Mức độ không trong suốt mô tả mức độ trong suốt, trong đó:

0% là hoàn toàn trong suốt.

100% (1) là giá trị mặc định, biểu thị hình ảnh gốc (không trong suốt).

Ghi chú：Không cho phép giá trị âm.

Lưu ý：Filter này tương tự như thuộc tính opacity.
saturate(%)

Chỉnh sửa độ bão hòa của hình ảnh.

0% (0) sẽ làm cho hình ảnh hoàn toàn không bão hòa.

100% là giá trị mặc định, biểu thị hình ảnh gốc.

Giá trị trên 100% sẽ cung cấp kết quả quá bão hòa.

Ghi chú：Không cho phép giá trị âm.
sepia(%)

Chuyển đổi hình ảnh thành màu nâu vàng.

0% (0) là giá trị mặc định, biểu thị hình ảnh gốc.

100% sẽ làm cho hình ảnh hoàn toàn chuyển thành màu nâu vàng.

Ghi chú：Không cho phép giá trị âm.

Chi tiết kỹ thuật

Phiên bản CSS: CSS3

Hỗ trợ trình duyệt

Số trong bảng chỉ ra phiên bản trình duyệt đầu tiên hỗ trợ thuộc tính này hoàn toàn.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
53.0 13.0 35.0 9.1 40.0