Hướng dẫn filter background-image css - lọc css hình nền

Hướng dẫn filter background-image css - lọc css hình nền

Đã đăng vào thg 10 10, 2018 1:59 SA 0 phút đọc 0 phút đọc

Bạn có thể áp dụng filter cho toàn bộ phần tử HTML khá dễ dàng với thuộc tính filter. Nhưng điều gì sẽ xảy ra nếu bạn muốn áp dụng bộ lọc chỉ cho background image của một phần tử? Có các thuộc tính CSS dành riêng cho background image, như chế độ hòa trộn nền (thuộc tính background-blend-mode) - nhưng việc pha trộn màu (blend) và các bộ lọc màu (filter) là không giống nhau.

Dưới dây mình sẽ hướng dẫn các bạn làm điều đó với việc sử dụng pseudo-element.pseudo-element.

CSS

.element {
  position: relative;
}
.element::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background-image: url(image-to-be-filtered.jpg);
  filter: grayscale(100%);
}
.element-inside {
  /* Sử dụng position relative sẽ làm cho nó xếp chồng lên trên thẻ ::before */
  position: relative;
}

HTML

element

Demo

Dưới đây là một tool khá hay để các bạn có thể thử nghiệm của tác giả Dan WilsonDan Wilson

All rights reserved

Vietnamese (Tiếng Việt) translation by Dai Phong (you can also view the original English article) Dai Phong (you can also view the original English article)

Trong hướng dẫn này chúng ta sẽ tìm hiểu về một đồ chơi CSS mới nổi với tên gọi là Backdrop Filter.

Việc đề xuất backdrop-filter bị ảnh hưởng nhiều bởi ngôn ngữ thiết kế của Apple, đặc biệt là frosty-transparent-blurry-background (hình nền mờ ảo trong sương mù) được nhìn thấy gần đây trong giao diện của iOS và macOS. Bạn sẽ để ý thấy nó trong thanh Dock, Menu ngữ cảnh, và trung tâm Thông báo.

Hướng dẫn filter background-image css - lọc css hình nền
Hướng dẫn filter background-image css - lọc css hình nền
Hướng dẫn filter background-image css - lọc css hình nền

Backdrop filter hiện được nung nấu ở dưới CSS Filters Level 2, và ở thời điểm hiện tại của bài viết, nó chỉ hoạt động trong Safari 9 với tiền tố -webkit-, và Chrome cũng như Opera bằng cách kích hoạt “Experimental Web Platform Features” ở dưới menu chrome://flags.

Hướng dẫn filter background-image css - lọc css hình nền
Hướng dẫn filter background-image css - lọc css hình nền
Hướng dẫn filter background-image css - lọc css hình nền

Sử dụng Backdrop Filter

Backdrop Filter được thêm vào như là một phần của đặt tả CSS Filter và vì vậy, cũng giống như thuộc tính filter, nó thừa kế tất cả những chức năng lọc tương tự chẳng hạn như 

element
0, 
element
1, và 
element
2. Sự khác biệt duy nhất ở đây là nó sẽ tác dụng lên các yếu tố bên dưới của các phần tử được lựa chọn.

Để sử dụng nó, chúng ta sẽ cần ít nhất hai thành phần; phần tử đầu tiên sẽ là phần tử mục tiêu, trong khi thứ hai sẽ nằm bên dưới nó. Ví dụ:

Hướng dẫn filter background-image css - lọc css hình nền

Thiết lập nền trong phần tử đầu tiên với độ trong suốt thấp vì vậy chúng ta có thể thêm 

element
3 bằng một hàm, ví dụ, 
element
0 để chuyển thành nền trắng và đen.

.filter {
    -webkit-backdrop-filter: blur(10px); /* Safari 9+ */
    backdrop-filter: blur(10px); /* Chrome and Opera */
    background-color: rgba(255, 255, 255, 0.3);
}

Lưu ý trong demo sau đây các phần tử con của phần tử

element
5 (một nút trong trường hợp này) vẫn còn rõ nét cho dù thêm hàm
element
1. Đây là một điểm mạnh mà 
element
3 có so với thuộc tính filter; nơi mà các phần tử con bị tác động.

Lưu ý: hình ảnh ở đây được lấy từ bài hướng dẫn How to Create a Little Red Riding Hood Inspired Fairytale Illustration in Paint Tool SAI.: hình ảnh ở đây được lấy từ bài hướng dẫn How to Create a Little Red Riding Hood Inspired Fairytale Illustration in Paint Tool SAI.

Kết hợp nhiều bộ lọc

Kết hợp hai chức năng lọc trong một định nghĩa cũng được chấp nhận. Ví dụ, giữ

element
1 của chúng ta, nhưng thêm hàm
element
0 để tách phông nền.

.filter {
    -webkit-backdrop-filter: grayscale() blur(10px); /* Safari 9+ */
    backdrop-filter: grayscale() blur(10px); /* Chrome and Opera */
    background-color: rgba(255, 255, 255, 0.3);
}

Các hàm khác mà bạn có thể thêm vào hỗn hợp bao gồm:

  • Hướng dẫn filter background-image css - lọc css hình nền
    1: nhận một con số từ 0 tới vô cùng, hoặc phần trăm. Bất kỳ số nào dưới
    Hướng dẫn filter background-image css - lọc css hình nền
    2, ví dụ như 
    Hướng dẫn filter background-image css - lọc css hình nền
    3, sẽ làm tối các phần tử, và thiết lập bất kỳ số nào trên
    Hướng dẫn filter background-image css - lọc css hình nền
    2 sẽ làm sáng các phần tử.
  • Hướng dẫn filter background-image css - lọc css hình nền
    5: nhận một con số và tỷ lệ phần trăm, làm việc tương tự như hàm
    Hướng dẫn filter background-image css - lọc css hình nền
    1, ngoại trừ hàm này xác định độ tương phản của phần tử.
  • Hướng dẫn filter background-image css - lọc css hình nền
    7: hàm tạo ra những màu sắc đối ngịch hoặc tiêu cực so với phông nền. Tương tự, các hàm cũng chấp nhận giá trị là một con số và tỷ lệ phần trăm.

Bộ lọc nâng cao với SVG

Nếu bạn không thể tìm thấy hiệu ứng mong muốn từ các hàm mặc định, bạn luôn có thể thêm một bộ lọc nâng cao hơn thông qua SVG. Tạo một bộ lọc SVG với một ID duy nhất, và lưu nó trong một tập tin

Hướng dẫn filter background-image css - lọc css hình nền
8:




Tham chiếu đến bộ lọc với hàm

Hướng dẫn filter background-image css - lọc css hình nền
9, như sau.

.filter {
    -webkit-backdrop-filter: url(../images/filter.svg#morph); /* Safari 9 */
    backdrop-filter: url(../images/filter.svg#morph); /* Chrome and Opera */
}

Thật không may, thêm các bộ lọc với hàm

Hướng dẫn filter background-image css - lọc css hình nền
9 có vẻ như không làm việc trong trình duyệt ở thời điểm hiện tại. Nhưng một khi được cài đặt đúng, hình ảnh sẽ trông như thế này.

Hướng dẫn filter background-image css - lọc css hình nền
Hướng dẫn filter background-image css - lọc css hình nền
Hướng dẫn filter background-image css - lọc css hình nền
Bộ lọc tuỳ biến với SVG.

Cần xây dựng những gì?

Hiện có một số cài đặt thực tế trên các trang web mà chúng ta có thể áp dụng backdrop filter một cách có ý nghĩa hơn chỉ là một sự trang trí. Một ví dụ hay là Medium, làm mờ ảnh bìa của bài viết cũng như các hình ảnh trong nội dung bài viết trước khi hình ảnh được nạp đầy đủ.

Hướng dẫn filter background-image css - lọc css hình nền
Hướng dẫn filter background-image css - lọc css hình nền
Hướng dẫn filter background-image css - lọc css hình nền
Hiệu ứng ảnh mờ trong Medium.com

Một ví dụ thực tế khác là Facebook, nó cũng làm mờ các tấm hình người lớn, không phù hợp hoặc nội dung gây rối loạn, trước khi người dùng đồng ý xem đầy đủ hình ảnh.

Hướng dẫn filter background-image css - lọc css hình nền
Hướng dẫn filter background-image css - lọc css hình nền
Hướng dẫn filter background-image css - lọc css hình nền
Facebook làm mờ một tấm hình vi phạm hướng dẫn Facebook Community Standard.

Kết luận

Trong những năm qua, CSS đã được cải tiến bằng các đặc tả kỹ thuật mới cho phép nhà thiết kế xây dựng giao diện hấp dẫn hơn trên web. Transform, transition, and animation đã được cài đặt đầy đủ, và bây giờ là Backdrop Filter cũng đang hướng đến chúng ta.

Cho dù nó có thể còn quá sớm để sử dụng backdrop-filter trong sản phẩm, thì những demo này chỉ ra rằng chúng ta sẽ sớm có thể áp dụng các hiệu ứng lọc vào các phần tử theo cách đơn giản hơn và cuối cùng ít phụ thuộc hơn vào JavaScript hoặc các thư viện Canvas. Cho đến lúc đó, theo dõi trang Blog của Webkit để cập nhật về điều này và các dự án khác.

Các nguồn tài nguyên khác

  • Bản thảo Backdrop Filter: Bản thảo W3C
  • Trình duyệt hỗ trợ Backdrop Filter
  • Các pen về Backdrop Filter trên CodePen