Bộ lọc dữ liệu trong css là gì?
|
Thuộc tính bộ lọc được sử dụng để đặt hiệu ứng hình ảnh của một phần tử. Thuộc tính này chủ yếu được sử dụng trong nội dung hình ảnh để điều chỉnh kết xuất hình ảnh, nền, đường viền, v.v. Show cú pháp. filter: none|blur()|brightness()|contrast()|drop-shadow()| grayscale()|hue-rotate()|invert()|opacity()|saturate()|sepia()| url(); Ghi chú. Có thể thêm nhiều bộ lọc vào phần tử HTML được phân tách bằng dấu cách Thí dụ. Ví dụ này áp dụng hai chức năng bộ lọc cho thành phần hình ảnh trong trang web img {
filter: brightness(20%) blur(20px);
}Thuộc tính bộ lọc chấp nhận cả giá trị phần trăm và giá trị thập phân Chức năng lọc
Thí dụ. Ví dụ này mô tả thuộc tính bộ lọc có giá trị bộ lọc là none HTML
img {
filter: brightness(20%) blur(20px);
}1_______1_______2img {
filter: brightness(20%) blur(20px);
}1_______66_______
img {
filter: brightness(20%) blur(20px);
}7>
đầu ra độ sáng(). Nó đặt độ sáng của phần tử. Nếu độ sáng là 0% thì nó hoàn toàn đen và nếu độ sáng là 100% thì nó giống như ban đầu. Các giá trị lớn hơn 100% dẫn đến các phần tử sáng hơn Thí dụ. Ví dụ này mô tả thuộc tính bộ lọc với giá trị bộ lọc là độ sáng có 100% HTML
img {
filter: brightness(20%) blur(20px);
}1_______1_______2img {
filter: brightness(20%) blur(20px);
}1_______66_______
img {
filter: brightness(20%) blur(20px);
}7>
đầu ra thang độ xám(). Nó chuyển đổi các màu phần tử thành màu đen và trắng. Thang độ xám 0% biểu thị phần tử gốc và 100% biểu thị phần tử thang độ xám hoàn toàn. Nó không chấp nhận các giá trị tiêu cực Thí dụ. Ví dụ này mô tả thuộc tính bộ lọc có giá trị bộ lọc là thang độ xám HTML
img {
filter: brightness(20%) blur(20px);
}1_______1_______2img {
filter: brightness(20%) blur(20px);
}1_______66_______
img {
filter: brightness(20%) blur(20px);
}7>
đầu ra nâu đỏ(). Nó chuyển đổi hình ảnh thành hình ảnh màu nâu đỏ trong đó 0% đại diện cho hình ảnh gốc và 100% đại diện cho màu nâu đỏ hoàn toàn. Nó không chấp nhận các giá trị tiêu cực Thí dụ. Ví dụ này mô tả thuộc tính bộ lọc có giá trị bộ lọc là màu nâu đỏ HTML
img {
filter: brightness(20%) blur(20px);
}1_______1_______2img {
filter: brightness(20%) blur(20px);
}1_______66_______
img {
filter: brightness(20%) blur(20px);
}7>
đầu ra. trái ngược(). Nó giúp điều chỉnh độ tương phản của phần tử. Độ tương phản 0% biểu thị phần tử đen hoàn toàn và độ tương phản 100% biểu thị phần tử gốc Thí dụ. Ví dụ này mô tả thuộc tính bộ lọc với giá trị bộ lọc là độ tương phản, để điều chỉnh mức độ tương phản cho hình ảnh HTML
img {
filter: brightness(20%) blur(20px);
}1_______1_______2img {
filter: brightness(20%) blur(20px);
}1_______66_______
img {
filter: brightness(20%) blur(20px);
}7>
đầu ra bão hòa (). Nó được sử dụng để đặt độ bão hòa của các phần tử. Độ bão hòa 0% cho biết một phần tử hoàn toàn không bão hòa và độ bão hòa 100% cho biết hình ảnh gốc. Giá trị lớn hơn 100% kết quả là siêu bão hòa phần tử Thí dụ. Ví dụ này mô tả thuộc tính bộ lọc có giá trị bộ lọc là bão hòa để cân bằng mức độ bão hòa của hình ảnh HTML
img {
filter: brightness(20%) blur(20px);
}1_______1_______2img {
filter: brightness(20%) blur(20px);
}1_______66_______
img {
filter: brightness(20%) blur(20px);
}7>
đầu ra mơ hồ(). Nó áp dụng hiệu ứng mờ cho phần tử. Nếu giá trị mờ không được chỉ định thì nó sẽ lấy 0 làm giá trị mặc định Thí dụ. Ví dụ này mô tả thuộc tính bộ lọc với giá trị bộ lọc là độ mờ để tạo hiệu ứng hình ảnh mờ HTML
img {
filter: brightness(20%) blur(20px);
}1_______1_______2img {
filter: brightness(20%) blur(20px);
}1_______66_______
img {
filter: brightness(20%) blur(20px);
}7>
đầu ra độ mờ(). Nó đặt hiệu ứng độ mờ của hình ảnh. Độ mờ 0% cho biết phần tử hoàn toàn trong suốt và nếu độ mờ là 100% thì nó cho biết hình ảnh gốc. Nó không chấp nhận giá trị âm Thí dụ. Ví dụ này mô tả thuộc tính bộ lọc trong đó giá trị bộ lọc được đặt là độ mờ bằng 0. 5 HTML
img {
filter: brightness(20%) blur(20px);
}1_______1_______2img {
filter: brightness(20%) blur(20px);
}1_______66_______
img {
filter: brightness(20%) blur(20px);
}7>
đầu ra hue-rotate(). Nó áp dụng một vòng xoay màu sắc cho hình ảnh. Giá trị xác định số độ xung quanh vòng tròn màu mà các mẫu hình ảnh sẽ được điều chỉnh. Giá trị mặc định là 0 độ và nó đại diện cho hình ảnh gốc Thí dụ. Ví dụ này mô tả thuộc tính bộ lọc trong đó hue-rotate được đặt thành 45deg HTML
img {
filter: brightness(20%) blur(20px);
}1_______1_______2img {
filter: brightness(20%) blur(20px);
}1_______66_______
img {
filter: brightness(20%) blur(20px);
}7>
đầu ra đảo ngược(). Nó đảo ngược phần tử. Giá trị mặc định là 0% và nó đại diện cho hình ảnh gốc. 100% làm cho hình ảnh bị đảo ngược hoàn toàn. Nó không chấp nhận giá trị âm Thí dụ. Ví dụ này mô tả thuộc tính bộ lọc với giá trị bộ lọc là đảo ngược HTML
img {
filter: brightness(20%) blur(20px);
}1_______1_______2img {
filter: brightness(20%) blur(20px);
}1_______66_______
img {
filter: brightness(20%) blur(20px);
}7>
đầu ra bóng đổ (). Nó áp dụng hiệu ứng bóng đổ cho phần tử. Nó chấp nhận h-shadow, v-shadow, blur, spread và color làm giá trị. Nó không chỉ được áp dụng cho hình ảnh mà còn có thể được áp dụng cho hình dạng vì nó có thể có hình dạng giống như hình gốc. Các giá trị âm cho h-shadow & v-shadow sẽ dịch chuyển bóng sang bên trái của hình ảnh Thí dụ. Ví dụ này mô tả thuộc tính bộ lọc áp dụng hiệu ứng bóng đổ cho phần tử HTML
img {
filter: brightness(20%) blur(20px);
}1_______1_______2img {
filter: brightness(20%) blur(20px);
}1_______66_______
img {
filter: brightness(20%) blur(20px);
}7>
đầu ra. Thí dụ. Ở đây, bóng đổ được áp dụng cho bóng ngang cho hình ảnh đó HTML
img {
filter: brightness(20%) blur(20px);
}1_______64_______50img {
filter: brightness(20%) blur(20px);
}1>
img {
filter: brightness(20%) blur(20px);
}7>
đầu ra Từ đầu ra, bạn có thể quan sát rằng chúng ta có thể có được hình dạng tương tự bằng cách sử dụng bóng đổ và nếu bạn tăng độ lệch x, nó có thể di chuyển về bên phải, nếu bạn áp dụng độ lệch y, nó sẽ di chuyển về phía dưới. Tương tự, bạn có thể thiết kế bất kỳ hình dạng nào và nếu bạn áp dụng thuộc tính bóng đổ, nó sẽ tạo bóng cho hình ảnh đó Bộ lọc dữ liệu HTML là gì?Một plugin lọc dữ liệu nhỏ gọn và hoạt động hiệu quả giúp lọc qua danh sách các mục nhập theo tên dữ liệu hoặc giá trị dữ liệu mà bạn chỉ định .
Lọc dữ liệu nghĩa là gì?Lọc dữ liệu là quá trình chọn một phần nhỏ hơn trong tập dữ liệu của bạn và sử dụng tập hợp con đó để xem hoặc phân tích . Quá trình lọc nói chung (nhưng không phải luôn luôn) là tạm thời – bộ dữ liệu hoàn chỉnh được giữ lại, nhưng chỉ một phần của nó được sử dụng để tính toán.
Công dụng của filter() là gì?Hàm FILTER lọc một mảng dựa trên mảng Boolean (Đúng/Sai) . ghi chú. Mảng có thể được coi là một hàng giá trị, một cột giá trị hoặc kết hợp các hàng và cột giá trị.
Bộ lọc và ví dụ là gì?Ví dụ phổ biến nhất là pha trà. Trong khi pha trà, bộ lọc hoặc rây dùng để tách lá trà ra khỏi nước . Chỉ có nước đi qua lỗ sàng. Chất lỏng thu được sau khi lọc được gọi là dịch lọc; . |
