1. Web
  2. CSS
  3. Reference
  4. Properties
  5. filter

filter

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2016.

* Some parts of this feature may have varying levels of support.

Thuộc tính filter trong CSS áp dụng các hiệu ứng đồ họa như làm mờ hoặc dịch chuyển màu sắc cho một phần tử. Bộ lọc thường được sử dụng để điều chỉnh kết xuất của hình ảnh, nền và đường viền.

Một số hàm, chẳng hạn như blur() và contrast(), sẵn có để giúp bạn đạt được các hiệu ứng được định sẵn.

Try it

filter: url("/shared-assets/images/examples/shadow.svg#element-id");

filter: blur(5px);

filter: contrast(200%);

filter: grayscale(80%);

filter: hue-rotate(90deg);

filter: drop-shadow(16px 16px 20px red) invert(75%);

<section id="default-example">
  <div class="example-container">
    <img
      id="example-element"
      src="/shared-assets/images/examples/firefox-logo.svg"
      width="200" />
  </div>
</section>

.example-container {
  background-color: white;
  width: 260px;
  height: 260px;
  display: flex;
  align-items: center;
  justify-content: center;
}

#example-element {
  flex: 1;
  padding: 30px;
}

Cú pháp

css
/* Giá trị <filter-function> */
filter: blur(5px);
filter: brightness(0.4);
filter: contrast(200%);
filter: drop-shadow(16px 16px 20px blue);
filter: grayscale(50%);
filter: hue-rotate(90deg);
filter: invert(75%);
filter: opacity(25%);
filter: saturate(30%);
filter: sepia(60%);

/* URL */
filter: url("filters.svg#filter-id");

/* Nhiều bộ lọc */
filter: contrast(175%) brightness(3%);
filter: drop-shadow(3px 3px red) sepia(100%) drop-shadow(-3px -3px blue);

/* Không dùng bộ lọc */
filter: none;

/* Giá trị toàn cục */
filter: inherit;
filter: initial;
filter: revert;
filter: revert-layer;
filter: unset;

Tham chiếu bộ lọc SVG

Bạn có thể sử dụng url() để tham chiếu đến phần tử bộ lọc SVG. Để tham chiếu đến phần tử SVG <filter>, hãy sử dụng cú pháp sau:

css
filter: url("file.svg#filter-element-id");

Hàm

Thuộc tính filter được chỉ định là none hoặc một hoặc nhiều hàm được liệt kê bên dưới. Nếu tham số cho bất kỳ hàm nào không hợp lệ, hàm trả về none. Trừ khi có ghi chú, các hàm nhận giá trị được biểu thị bằng dấu phần trăm (như 34%) cũng chấp nhận giá trị được biểu thị dưới dạng thập phân (như 0.34).

Khi giá trị thuộc tính filter chứa nhiều hàm, các bộ lọc được áp dụng theo thứ tự.

blur()

Áp dụng làm mờ Gaussian cho hình ảnh đầu vào.

css
filter: blur(5px);
brightness()

Áp dụng hệ số nhân tuyến tính cho hình ảnh đầu vào, làm cho nó trông sáng hơn hoặc tối hơn. Các giá trị là hệ số nhân tuyến tính trên hiệu ứng, với 0% tạo ra hình ảnh hoàn toàn đen, 100% không có hiệu lực, và các giá trị trên 100% làm sáng hình ảnh.

css
filter: brightness(2);
contrast()

Điều chỉnh độ tương phản của hình ảnh đầu vào. Giá trị 0% làm cho hình ảnh có màu xám, 100% không có hiệu lực, và các giá trị trên 100% tạo độ tương phản.

css
filter: contrast(200%);
drop-shadow()

Áp dụng tham số <shadow> dưới dạng bóng đổ, theo đường viền của hình ảnh. Cú pháp bóng tương tự như <box-shadow> (được xác định trong mô-đun nền và viền CSS), ngoại trừ từ khóa inset và tham số spread không được phép. Như với tất cả các giá trị thuộc tính filter, bất kỳ bộ lọc nào sau drop-shadow() đều được áp dụng cho bóng.

css
filter: drop-shadow(16px 16px 10px black);
grayscale()

Chuyển đổi hình ảnh sang màu xám. Giá trị 100% là hoàn toàn màu xám. Giá trị ban đầu 0% giữ nguyên đầu vào. Các giá trị từ 0% đến 100% tạo ra hệ số nhân tuyến tính trên hiệu ứng.

css
filter: grayscale(100%);
hue-rotate()

Áp dụng xoay màu sắc. Giá trị <angle> xác định số độ quanh vòng tròn màu sắc mà tại đó các mẫu đầu vào sẽ được điều chỉnh. Giá trị 0deg giữ nguyên đầu vào.

css
filter: hue-rotate(90deg);
invert()

Đảo ngược các mẫu trong hình ảnh đầu vào. Giá trị 100% đảo ngược hoàn toàn hình ảnh. Giá trị 0% giữ nguyên đầu vào. Các giá trị từ 0% đến 100% có hệ số nhân tuyến tính trên hiệu ứng.

css
filter: invert(100%);
opacity()

Áp dụng độ trong suốt. 0% làm cho hình ảnh hoàn toàn trong suốt và 100% giữ nguyên hình ảnh.

css
filter: opacity(50%);
saturate()

Bão hòa hình ảnh, với 0% là hoàn toàn không bão hòa, 100% giữ nguyên hình ảnh, và các giá trị trên 100% tăng độ bão hòa.

css
filter: saturate(200%);
sepia()

Chuyển đổi hình ảnh sang sepia, với giá trị 100% làm cho hình ảnh hoàn toàn sepia và 0% không thay đổi.

css
filter: sepia(100%);

Kết hợp các hàm

Bạn có thể kết hợp bất kỳ số lượng hàm nào để thao tác kết xuất. Các bộ lọc được áp dụng theo thứ tự khai báo. Ví dụ sau tăng cường độ tương phản và độ sáng của hình ảnh:

css
filter: contrast(175%) brightness(103%);

Nội suy

Khi được hoạt hình, nếu cả bộ lọc đầu và cuối đều có danh sách hàm có cùng độ dài mà không có <url> theo cùng thứ tự, mỗi hàm bộ lọc của chúng được nội suy theo các quy tắc riêng của hàm bộ lọc.

Nếu danh sách bộ lọc có độ dài khác nhau, các hàm bộ lọc tương đương còn thiếu từ danh sách dài hơn được thêm vào cuối danh sách ngắn hơn. Các hàm được thêm vào sử dụng giá trị ban đầu của chúng, không có sửa đổi bộ lọc. Tất cả các bộ lọc được liệt kê sau đó được nội suy theo các quy tắc riêng của hàm bộ lọc. Ngược lại, nội suy rời rạc được sử dụng.

Định nghĩa hình thức

Initial valuenone
Applies toall elements; In SVG, it applies to container elements excluding the <defs> element and all graphics elements
Inheritedno
Computed valueas specified
Animation typea filter function list

Cú pháp hình thức

filter = 
  none                 |
  <filter-value-list>  

<filter-value-list> = 
  [ <filter-function> | <url> ]+  

<filter-function> = 
  <blur()>         |
  <brightness()>   |
  <contrast()>     |
  <drop-shadow()>  |
  <grayscale()>    |
  <hue-rotate()>   |
  <invert()>       |
  <opacity()>      |
  <sepia()>        |
  <saturate()>     

<blur()> = 
  blur( <length>? )  

<brightness()> = 
  brightness( [ <number> | <percentage> ]? )  

<contrast()> = 
  contrast( [ <number> | <percentage> ]? )  

<drop-shadow()> = 
  drop-shadow( [ <color>? && <length>{2,3} ] )  

<grayscale()> = 
  grayscale( [ <number> | <percentage> ]? )  

<hue-rotate()> = 
  hue-rotate( [ <angle> | <zero> ]? )  

<invert()> = 
  invert( [ <number> | <percentage> ]? )  

<opacity()> = 
  opacity( [ <number> | <percentage> ]? )  

<sepia()> = 
  sepia( [ <number> | <percentage> ]? )  

<saturate()> = 
  saturate( [ <number> | <percentage> ]? )

Ví dụ

Áp dụng các hàm filter

Thuộc tính filter được áp dụng cho hình ảnh thứ hai, làm xám và mờ cả hình ảnh lẫn viền của nó.

css
img {
  border: 5px solid yellow;
}
/* Làm xám hình ảnh thứ hai 40% và mờ 5px */
img:nth-of-type(2) {
  filter: grayscale(0.4) blur(5px);
}
html
<img src="pencil.jpg" alt="Original image is sharp" />
<img src="pencil.jpg" alt="The image and border are blurred and muted" />

Lặp lại các hàm filter

Các hàm filter được áp dụng theo thứ tự xuất hiện. Cùng một hàm filter có thể được lặp lại.

css
#MDN-logo {
  border: 1px solid blue;
  filter: drop-shadow(5px 5px 0 red) hue-rotate(180deg)
    drop-shadow(5px 5px 0 red);
}

Các bộ lọc được áp dụng theo thứ tự. Đây là lý do tại sao các bóng đổ không cùng màu: màu sắc của bóng đổ đầu tiên bị thay đổi bởi hàm hue-rotate() nhưng bóng thứ hai thì không.

Thông số kỹ thuật

Specification
Filter Effects Module Level 1
# FilterProperty

Tương thích trình duyệt

Xem thêm

Help improve MDN

Learn how to contribute

This page was last modified on by MDN contributors.

View this page on GitHub • Report a problem with this content