Bộ lọc

The CSS Podcast – 023: Bộ lọc

Giả sử bạn cần tạo một phần tử có hiệu ứng kính mờ, hơi mờ nằm ở đầu hình ảnh. Văn bản cần phải là văn bản động chứ không phải hình ảnh. Làm cách nào để thực hiện điều đó?

Việc kết hợp bộ lọc CSS và backdrop-filter cho phép chúng ta áp dụng hiệu ứng và làm mờ những gì cần thiết theo thời gian thực. Làm mờ và độ mờ là hai trong số nhiều bộ lọc có sẵn, vì vậy, hãy cùng xem nhanh tất cả các bộ lọc này và cách sử dụng chúng.

Lưu ý: Hãy cẩn thận khi đặt văn bản lên hình ảnh để văn bản vẫn có thể đọc được nếu hiệu ứng bộ lọc không được hỗ trợ trong trình duyệt của người dùng.

Thuộc tính filter

Browser Support

• 53
• 12
• 35
• 9.1

Source

Bạn có thể áp dụng một hoặc nhiều bộ lọc sau đây làm giá trị cho filter. Nếu bạn áp dụng bộ lọc không chính xác, thì các bộ lọc còn lại được xác định cho filter sẽ không hoạt động.

blur

Thao tác này áp dụng hiệu ứng làm mờ Gaussian và đối số duy nhất bạn có thể truyền là radius, là mức độ làm mờ được áp dụng. Đây phải là đơn vị đo chiều dài, chẳng hạn như 10px. Không chấp nhận tỷ lệ phần trăm.

.my-element {
    filter: blur(0.2em);
}

brightness

Browser Support

• 18
• 12
• 35
• 6

Source

Để tăng hoặc giảm độ sáng của một phần tử, hãy sử dụng hàm độ sáng. Giá trị độ sáng được biểu thị bằng tỷ lệ phần trăm, trong đó hình ảnh không thay đổi được biểu thị bằng giá trị 100%. Giá trị 0% sẽ làm cho hình ảnh hoàn toàn đen, do đó, các giá trị từ 0% đến 100% sẽ làm cho hình ảnh kém sáng. Sử dụng các giá trị trên 100% để tăng độ sáng.

.my-element {
    filter: brightness(80%);
}

Lưu ý: Bạn cũng có thể sử dụng giá trị thập phân thay vì giá trị phần trăm trong các bộ lọc như brightness. Để đặt độ sáng 80% bằng số thập phân, hãy viết 0.8.

contrast

Browser Support

• 18
• 12
• 35
• 6

Source

Đặt giá trị từ 0% đến 100% để giảm hoặc tăng độ tương phản tương ứng.

.my-element {
    filter: contrast(160%);
}

grayscale

Browser Support

• 18
• 12
• 35
• 6

Source

Bạn có thể áp dụng hiệu ứng thang màu xám hoàn toàn bằng cách sử dụng 1 làm giá trị cho grayscale() hoặc 0 để có một phần tử bão hoà hoàn toàn. Bạn cũng có thể sử dụng giá trị phần trăm hoặc thập phân để chỉ áp dụng một phần hiệu ứng thang màu xám. Nếu bạn không truyền đối số nào, phần tử sẽ hoàn toàn có màu xám. Nếu bạn truyền một giá trị lớn hơn 100%, thì giá trị đó sẽ bị giới hạn ở mức 100%.

.my-element {
    filter: grayscale(80%);
}

invert

Browser Support

• 18
• 12
• 35
• 6

Source

Tương tự như grayscale, bạn có thể truyền 1 hoặc 0 vào hàm invert() để bật hoặc tắt chế độ này. Khi chế độ này bật, màu của phần tử sẽ được đảo ngược hoàn toàn. Bạn cũng có thể sử dụng giá trị phần trăm hoặc thập phân để chỉ áp dụng một phần đảo màu. Nếu bạn không truyền bất kỳ đối số nào vào hàm invert(), thì phần tử sẽ bị đảo ngược hoàn toàn.

.my-element {
    filter: invert(1);
}

opacity

Browser Support

• 18
• 12
• 35
• 6

Source

Bộ lọc opacity() hoạt động giống như thuộc tính opacity, trong đó bạn có thể truyền một số hoặc tỷ lệ phần trăm để tăng hoặc giảm độ mờ. Nếu bạn không truyền đối số nào, phần tử sẽ hiển thị đầy đủ.

.my-element {
    filter: opacity(0.3);
}

saturate

Browser Support

• 18
• 12
• 35
• 6

Source

Bộ lọc bão hoà rất giống với bộ lọc brightness và chấp nhận cùng một đối số: số hoặc tỷ lệ phần trăm. Thay vì tăng hoặc giảm hiệu ứng độ sáng, saturate sẽ tăng hoặc giảm độ bão hoà màu.

.my-element {
    filter: saturate(155%);
}

sepia

Browser Support

• 18
• 12
• 35
• 6

Source

Bạn có thể thêm hiệu ứng màu nâu đỏ bằng bộ lọc này hoạt động giống như grayscale(). Màu nâu đỏ là một kỹ thuật in ảnh chuyển đổi tông màu đen thành tông màu nâu để làm ấm ảnh. Bạn có thể truyền một số hoặc tỷ lệ phần trăm làm đối số cho sepia() để tăng hoặc giảm hiệu ứng. Việc không truyền đối số sẽ thêm hiệu ứng màu nâu đỏ đầy đủ (tương đương với sepia(100%)).

.my-element {
    filter: sepia(70%);
}

hue-rotate

Browser Support

• 18
• 12
• 35
• 6

Source

Bạn đã tìm hiểu cách sắc độ trong hsl tham chiếu đến việc xoay bánh xe màu trong bài học về màu sắc và bộ lọc này hoạt động theo cách tương tự. Nếu bạn truyền một góc, chẳng hạn như độ hoặc vòng, góc đó sẽ thay đổi sắc độ của tất cả màu của phần tử, thay đổi phần của bánh xe màu mà phần tử đó tham chiếu. Nếu bạn không truyền đối số nào, hàm này sẽ không thực hiện hành động nào.

.my-element {
    filter: hue-rotate(120deg);
}

drop-shadow

Browser Support

• 18
• 12
• 35
• 6

Source

Bạn có thể áp dụng hiệu ứng đổ bóng theo đường cong như trong một công cụ thiết kế, chẳng hạn như Photoshop bằng drop-shadow. Bóng này được áp dụng cho mặt nạ alpha, rất hữu ích khi thêm bóng vào hình ảnh được cắt. Bộ lọc drop-shadow lấy một tham số bóng đổ chứa các giá trị offset-x, offset-y, blur và color được phân tách bằng dấu cách. Hàm này gần giống với box-shadow, nhưng không hỗ trợ từ khoá inset và giá trị truyền.

.my-element {
    filter: drop-shadow(5px 5px 10px orange);
}

Tìm hiểu thêm về các loại bóng trong mô-đun shadows (bóng).

url

Browser Support

• 5
• 12
• 3
• 6

Source

Bộ lọc url cho phép bạn áp dụng bộ lọc SVG từ một phần tử hoặc tệp SVG được liên kết. Bạn có thể đọc thêm về bộ lọc SVG tại đây

Bộ lọc phông nền

Browser Support

• 76
• 79
• 103
• 18

Source

Thuộc tính backdrop-filter chấp nhận tất cả các giá trị hàm bộ lọc giống như filter. Sự khác biệt giữa backdrop-filter và filter là thuộc tính backdrop-filter chỉ áp dụng bộ lọc cho nền, còn thuộc tính filter áp dụng bộ lọc cho toàn bộ phần tử.

Ví dụ ngay từ đầu bài học này là ví dụ hoàn hảo, vì bạn không muốn văn bản bị làm mờ và lý tưởng nhất là bạn không muốn phải thêm các phần tử HTML khác. Bạn có thể chỉ áp dụng bộ lọc cho phông nền.

Kiểm tra mức độ hiểu biết

Kiểm tra kiến thức của bạn về bộ lọc

Hàm nào sau đây là hàm bộ lọc CSS?

grayscale()

🎉

invert()

🎉

flip()

Hãy thử lại!

multiply()

Hãy thử lại!

blur()

🎉

brightness()

🎉

CSS có thể sử dụng bộ lọc SVG không?

Có

Hàm lọc url() cho phép việc này

Không

Hãy thử lại!