Bộ lọc phông nền trong CSS là gì?
|
Sau đây là một loạt các phần tử hình ảnh ( -webkit-backdrop-filter: invert();2), mỗi phần tử có một -webkit-backdrop-filter: invert();3 ở trên cùng. Mỗi -webkit-backdrop-filter: invert();3 này được tạo kiểu bằng một loại bộ lọc phông nền khác nhau Show Hiệu ứng làm mờ đơn giảnbộ lọc phông nền. mờ (10px) CSS cho hình trên là -webkit-backdrop-filter: blur(10px); đảo ngược màubộ lọc phông nền. đảo ngược() CSS cho hình trên là -webkit-backdrop-filter: invert(); Nhiều bộ lọcbộ lọc phông nền. sepia() hue-rotate(120deg) CSS cho hình trên là -webkit-backdrop-filter: sepia() hue-rotate(120deg); phông nền độngCSS cho hình trên là -webkit-backdrop-filter: blur(10px); Thuộc tính này là phần mở rộng của Mô-đun Hiệu ứng Bộ lọc Cấp 1 xác định thuộc tính -webkit-backdrop-filter: invert();5. Nó sử dụng cú pháp giống như thuộc tính -webkit-backdrop-filter: invert();5 nhưng thay vào đó, các hiệu ứng được áp dụng cho phông nền của phần tử. Những hiệu ứng như vậy thường thấy trong các giao diện dành cho thiết bị chạy iOS7 trở lên, cũng như OS X Yosemite trở lên. Nếu không có thuộc tính này, hiệu ứng này chỉ có thể đạt được bằng cách tự chỉnh sửa ảnh nền và áp dụng các kỹ thuật cắt và định vị Để thuộc tính có bất kỳ hiệu ứng hiển thị nào, cần phải có 2 phần tử được xếp chồng lên nhau dọc theo trục z, từ các phần tử lồng nhau hoặc từ vị trí tuyệt đối. Ngoài ra, nền của phần tử mà -webkit-backdrop-filter: invert();7 được áp dụng cần phải ở dạng bán trong suốt. -webkit-backdrop-filter: invert();7 hoạt động bằng cách làm cho công cụ trình duyệt nhắm mục tiêu nội dung đằng sau phần tử được tạo kiểu chứ không phải nền của chính phần tử đó. Sau đó, hiệu ứng bộ lọc được áp dụng cho nội dung đó và phông nền được kết hợp với các thành phần khác trên trang trong kết xuất cuối cùng Áp dụng -webkit-backdrop-filter: invert();7 cho một phần tử cũng tạo ra ngữ cảnh xếp chồng mới, giống như khi áp dụng -webkit-backdrop-filter: sepia() hue-rotate(120deg);0 Lưu ý rằng việc sử dụng thuộc tính này có thể có tác động bất lợi đến hiệu suất, đặc biệt là khi áp dụng cho một số lượng lớn các phần tử hoặc một khu vực rộng lớn của trang và do đó nên được sử dụng với sự cân nhắc cẩn thận Cú pháp chính thức
giá trịnoneThis is the initial value. No filter effect is applied to the backdrop.-webkit-backdrop-filter: invert();5 property. ví dụSau đây là một ví dụ đơn giản về việc sử dụng thuộc tính -webkit-backdrop-filter: invert();7 để tạo hiệu ứng kính mờ. Đánh dấu là một hình ảnh và một Chú thích được đặt hoàn toàn ở phía dưới cùng của hình ảnh và -webkit-backdrop-filter: invert();7 được áp dụng cho chú thích đó________số 8 Hiệu ứng cuối cùng sẽ trông như thế này. Bản thử trực tiếpThuộc tính này hiện chỉ được hỗ trợ (và do đó có thể xem được) trong Safari 9 trở đi. Có thể bật thuộc tính CSS này trên Chrome và Opera bằng cách bật cờ “Tính năng nền tảng web thử nghiệm” Bản trình diễn sau đây là một ví dụ về cách chúng tôi có thể điều chỉnh màu văn bản tùy thuộc vào màu nền, i. e. có văn bản sáng trên nền tối và ngược lại, bằng cách áp dụng bộ lọc -webkit-backdrop-filter: invert();7. Xem bản trình diễn này trên Sân chơi Codrops Bản trình diễn tiếp theo này là một ví dụ về cách chúng tôi có thể tạo chuyển đổi hiệu ứng chế độ ban đêm bằng cách sử dụng bộ lọc Xem bản trình diễn này trên Sân chơi Codrops Chúng ta cũng có thể sử dụng bộ lọc Xem bản trình diễn này trên Sân chơi Codrops Hỗ trợ trình duyệtBộ lọc phông nền CSSPhương pháp áp dụng các hiệu ứng bộ lọc (như mờ, thang độ xám hoặc màu sắc) cho nội dung/phần tử bên dưới phần tử đích Phông nền trong HTML là gì?Thuộc tính backdrop-filter được sử dụng để áp dụng hiệu ứng đồ họa cho khu vực phía sau một phần tử .
Phông nền trong phong cách là gì?Các. phần tử giả CSS phông nền là hộp có kích thước bằng khung nhìn được hiển thị ngay bên dưới bất kỳ phần tử nào đang được trình bày ở chế độ toàn màn hình . Điều này bao gồm cả hai yếu tố đã được đặt ở chế độ toàn màn hình bằng cách sử dụng API toàn màn hình và các yếu tố
Phông nền trong website là gì?Phông nền gồm hai bề mặt. lớp sau và lớp trước . Lớp phía sau hiển thị các hành động và ngữ cảnh, đồng thời những điều này kiểm soát và thông báo nội dung của lớp phía trước.
Hiệu ứng bộ lọc trong CSS là gì?Thuộc tính CSS bộ lọc áp dụng các hiệu ứng đồ họa như làm mờ hoặc chuyển màu cho một phần tử . Bộ lọc thường được sử dụng để điều chỉnh kết xuất hình ảnh, nền và đường viền. Bao gồm trong tiêu chuẩn CSS là một số chức năng đạt được các hiệu ứng được xác định trước. |
