Thuộc tính filter của CSS

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

Thuộc tính filter định nghĩa hiệu ứng thị giác của phần tử (thường là <img>) (như mờ và độ饱 vành).

Xin xem thêm:

Giáo trình CSS:Hình ảnh CSS

Hướng dẫn tham khảo HTML DOM:Thuộc tính filter

Ví dụ

Chuyển đổi tất cả các hình ảnh thành đen trắng (100% xám):

img {
  filter: grayscale(100%);
}

Thử ngay

Lưu ý:Bạn có thể tìm thêm các ví dụ TIY ở dưới cùng của trang.

Ngữ pháp CSS

filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();

Lưu ý:Để sử dụng nhiều bộ lọc, hãy phân tách mỗi bộ lọc bằng khoảng trống (xem thêm các ví dụ thêm dưới trang).

Chi tiết kỹ thuật

Giá trị mặc định: none
Kế thừa: Không
Chế tạo animation: Hỗ trợ. Xem thêm:Các thuộc tính liên quan đến animation。
Phiên bản: CSS3
Cú pháp JavaScript: object.style.filter="grayscale(100%)"

Hàm bộ lọc

Ghi chú:Sử dụng tỷ lệ phần trăm (%) của bộ lọc (ví dụ 75%), cũng chấp nhận giá trị là số thập phân (ví dụ 0.75).

Bộ lọc Mô tả
none Giá trị mặc định. Quy định không có hiệu ứng.
blur(px)

Áp dụng hiệu ứng mờ cho hình ảnh. Giá trị lớn hơn sẽ tạo ra hiệu ứng mờ nhiều hơn.

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

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

  • 0% sẽ làm hình ảnh hoàn toàn đen.
  • Giá trị mặc định là 100%, đại diện cho hình ảnh gốc.
  • Giá trị vượt quá 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 hình ảnh hoàn toàn đen.
  • Giá trị mặc định là 100%, đại diện cho hình ảnh gốc.
  • Giá trị trên 100% sẽ cung cấp kết quả có độ tương phản cao hơn.
drop-shadow(h-shadow v-shadow blur spread color)

Áp dụng hiệu ứng bóng cho hình ảnh.

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

  • h-shadow - bắt buộc. Định nghĩa giá trị pixel cho bóng ngang.
  • v-shadow - bắt buộc. Định nghĩa giá trị pixel cho bóng dọc.

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

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

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

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

Ví dụ này tạo ra bóng đỏ, chiều rộng và chiều cao đều là 8px, có hiệu ứng mờ 10px:

filter: drop-shadow(8px 8px 10px red);

Lưu ý:Bộ lọc này tương tự như thuộc tính box-shadow.
grayscale(%);

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

  • 0% (0) là giá trị mặc định, đại diện cho hình ảnh gốc.
  • 100％ sẽ làm cho hình ảnh hoàn toàn chuyển sang xám (dùng cho hình ảnh đen trắng).

Ghi chú:Không được phép có 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 xác định độ số của vòng tròn màu. Giá trị mặc định là 0deg, đại diện cho hình ảnh gốc.

Ghi chú:Giá trị lớn nhất là 360deg.
invert(%);

Lật ngược mẫu trong hình ảnh.

  • 0% (0) là giá trị mặc định, đại diện cho hình ảnh gốc.
  • 100％ sẽ làm cho hình ảnh hoàn toàn lật ngược.

Ghi chú:Không được phép có giá trị âm.
opacity(%);

Đặt mức độ trong suốt của hình ảnh. opacity-level 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, đại diện cho hình ảnh gốc (không mờ).

Ghi chú:Không được phép có giá trị âm.

Lưu ý:Bộ lọc này tương tự như thuộc tính opacity.
saturate(%);

Đặt độ 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 và đại diện cho hình ảnh gốc.
  • Giá trị trên 100% cung cấp kết quả quá bão hòa.

Ghi chú:Không được phép có giá trị âm.
sepia(%);

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

  • 0% (0) là giá trị mặc định, đại diện cho hình ảnh gốc.
  • 100％ sẽ làm cho hình ảnh hoàn toàn chuyển sang nâu sẫm.

Ghi chú:Không được phép có giá trị âm.
url();

Hàm url() chấp nhận vị trí tệp XML của bộ lọc SVG và có thể chứa một điểm chỉ đến yếu tố lọc cụ thể. Ví dụ:

filter: url(svg-url#element-id);
initial Đặt thuộc tính này về giá trị mặc định. Xem thêm initial。
inherit Thừa kế thuộc tính này từ phần tử cha. Xem thêm inherit。

Các mẫu khác

Mẫu mờ

Thêm hiệu ứng mờ cho hình ảnh:

img {
  filter: blur(5px);
}

Thử ngay

Mẫu mờ 2

Áp dụng hình ảnh nền mờ:

img.background {
  filter: blur(35px);
}

Thử ngay

Mẫu sáng

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

img {
  filter: brightness(200%);
}

Thử ngay

Mẫu tương phản

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

img {
  filter: contrast(200%);
}

Thử ngay

Mẫu bóng

Áp dụng hiệu ứng bóng cho hình ảnh:

img {
  filter: drop-shadow(8px 8px 10px gray);
}

Thử ngay

Mẫu độ xám

Chuyển đổi hình ảnh thành độ xám:

img {
  filter: grayscale(50%);
}

Thử ngay

Mẫu xoay màu sắc

Áp dụng hiệu ứng xoay màu sắc trên hình ảnh:

img {
  filter: hue-rotate(90deg);
}

Thử ngay

Mẫu đảo ngược

Đảo ngược mẫu trong hình ảnh:

img {
  filter: invert(100%);
}

Thử ngay

Mẫu trong suốt

Đặt mức độ trong suốt của hình ảnh:

img {
  filter: opacity(30%);
}

Thử ngay

Mẫu độ饱 vành

Chỉnh sửa độ饱 vành của hình ảnh:

img {
  filter: saturate(800%);
}

Thử ngay

Mẫu nâu đỏ

Chuyển đổi hình ảnh thành màu nâu đỏ:

img {
  filter: sepia(100%);
}

Thử ngay

Sử dụng nhiều lọc

Để sử dụng nhiều lọc, hãy phân cách mỗi lọc bằng khoảng trống. Lưu ý rằng thứ tự rất quan trọng (ví dụ: sử dụng grayscale() sau sepia() sẽ tạo ra hình ảnh hoàn toàn xám):

img {
  filter: contrast(200%) brightness(150%);
}

Thử ngay

Tất cả các lọc

Hiển thị tất cả các hàm lọc:

.blur {
  filter: blur(4px);
}
.brightness {
  filter: brightness(0.30);
}
.contrast {
  filter: contrast(180%);
}
.grayscale {
  filter: grayscale(100%);
}
.huerotate {
  filter: hue-rotate(180deg);
}
.invert {
  filter: invert(100%);
}
.opacity {
  filter: opacity(50%);
}
.saturate {
  filter: saturate(7);
}
.sepia {
  filter: sepia(100%);
}
.shadow {
  filter: drop-shadow(8px 8px 10px green);
}

Thử ngay

Hỗ trợ trình duyệt

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

Số liệu có dấu '-'webkit-' biểu thị phiên bản đầu tiên sử dụng tiền tố.

Chrome IE / Edge Firefox Safari Opera
53.0
18.0 -webkit-		 13.0 35.0 9.1
6.0 -webkit-		 40.0
15.0 -webkit-

Ghi chú:Các phiên bản Internet Explorer cũ hơn (4.0 đến 8.0) hỗ trợ thuộc tính 'filter' không tiêu chuẩn đã bị bỏ lại. Khi cần hỗ trợ IE8 và các phiên bản thấp hơn, chủ yếu được sử dụng cho độ mờ.