Lọc CSS

Bộ lọc CSS được sử dụng để đặt hiệu ứng hình ảnh cho văn bản, hình ảnh và các khía cạnh khác của trang web. Thuộc tính bộ lọc CSS cho phép chúng tôi truy cập các hiệu ứng như màu sắc hoặc độ mờ, thay đổi khi hiển thị phần tử trước khi phần tử được hiển thị

Cú pháp của thuộc tính bộ lọc CSS được đưa ra dưới đây

cú pháp

Hãy thảo luận về các giá trị thuộc tính cùng với một ví dụ

độ sáng()

Đúng như tên gọi của nó, nó được sử dụng để đặt độ sáng của một phần tử. Nếu độ sáng là 0%, thì nó đại diện cho màu đen hoàn toàn, trong khi độ sáng 100% đại diện cho màu gốc. Nó cũng có thể chấp nhận các giá trị trên 100% mang lại kết quả tốt hơn

Chúng ta có thể hiểu nó bằng cách sử dụng hình minh họa sau

Thí dụ

Kiểm tra nó ngay bây giờ

mơ hồ()

Nó được sử dụng để áp dụng hiệu ứng mờ cho phần tử. Nếu giá trị mờ không được chỉ định, thì giá trị 0 được sử dụng làm giá trị mặc định. Tham số trong thuộc tính blur() không chấp nhận giá trị phần trăm. Một giá trị lớn hơn của nó tạo ra nhiều mờ hơn

Thí dụ

Kiểm tra nó ngay bây giờ

đảo ngược()

Nó được sử dụng để đảo ngược các mẫu trong hình ảnh đầu vào. Giá trị 100% của nó đại diện cho đảo ngược hoàn toàn và giá trị 0% khiến đầu vào không thay đổi. Giá trị âm không được phép trong đó

Thí dụ

Kiểm tra nó ngay bây giờ

bão hòa ()

Nó đặt độ bão hòa của một phần tử. Độ bão hòa 0% đại diện cho phần tử chưa bão hòa hoàn toàn, trong khi độ bão hòa 100% đại diện cho nguyên tố gốc. Các giá trị lớn hơn 100% được phép cung cấp kết quả siêu bão hòa. Chúng tôi không thể sử dụng các giá trị âm với thuộc tính này

Thí dụ

Kiểm tra nó ngay bây giờ

bóng đổ ()

Nó áp dụng hiệu ứng bóng đổ cho hình ảnh đầu vào. Các giá trị mà nó chấp nhận là h-shadow, v-shadow, blur, spread và color

Thí dụ

Kiểm tra nó ngay bây giờ

tương phản()

Nó điều chỉnh độ tương phản của đầu vào. Giá trị 0% của nó sẽ tạo ra một hình ảnh đen hoàn toàn, trong khi các giá trị 100% không thay đổi đầu vào, i. e. , đại diện cho một bản gốc. Các giá trị lớn hơn 100% được phép cung cấp kết quả có độ tương phản thấp hơn

Thí dụ

Kiểm tra nó ngay bây giờ

độ mờ()

Nó được sử dụng để áp dụng độ trong suốt cho hình ảnh đầu vào. Giá trị 0% của nó biểu thị hoàn toàn trong suốt, trong khi giá trị 100% biểu thị hình ảnh gốc, tôi. e. , mờ hoàn toàn

Hãy hiểu nó bằng một minh họa

Thí dụ

Kiểm tra nó ngay bây giờ

hue-rotate()

Nó áp dụng xoay màu sắc trên hình ảnh đầu vào. Giá trị chu vi của nó xác định số độ xung quanh vòng tròn màu; . Giá trị mặc định của nó là 0 độ, đại diện cho hình ảnh gốc. Giá trị tối đa của nó là 360 độ

Hãy hiểu nó bằng một minh họa

Thí dụ

Kiểm tra nó ngay bây giờ

thang độ xám()

Nó chuyển đổi hình ảnh đầu vào thành đen trắng. 0% thang độ xám đại diện cho thang độ gốc, trong khi 100% đại diện cho thang độ xám hoàn toàn. Nó chuyển đổi màu sắc của đối tượng thành 256 sắc thái xám

Thí dụ

Kiểm tra nó ngay bây giờ

nâu đỏ()

Nó được sử dụng để chuyển đổi hình ảnh thành hình ảnh màu nâu đỏ. Giá trị 0% biểu thị hình ảnh gốc, trong khi giá trị 100% biểu thị màu nâu đỏ hoàn toàn

Khi bạn lần đầu tiên nghe thấy từ “bộ lọc”, tôi cá rằng điều đầu tiên bạn nghĩ đến là các bộ lọc Instagram khiến một người trông như vừa bước ra khỏi trang bìa của tạp chí Vogue hoặc GQ. Hay bộ lọc Snapchat biến bạn thành chó đi xem Coachella. Chà, blog này không phải về cách trở thành người có ảnh hưởng trên mạng xã hội. Thực ra tôi đang nói về bộ lọc hình ảnh CSS. Có, chúng tôi có thể kết hợp các hiệu ứng phong cách và mê hoặc trên hình ảnh của ứng dụng bằng cách sử dụng CSS và tôi sẽ hướng dẫn bạn qua từng bộ lọc

Các bộ lọc hình ảnh này được hỗ trợ trong tất cả các trình duyệt chính (Chrome, Safari, Firefox), ngoại trừ Internet Explorer (tại sao điều đó vẫn còn tồn tại?)

Có 9 bộ lọc chúng ta có thể sử dụng

thang độ xám()
nâu đỏ()
mơ hồ()
đảo ngược()
độ mờ()
bão hòa ()
tương phản()
độ sáng()
hue-rotate()
bóng đổ ()

Trong tất cả các phương pháp này, chúng tôi sẽ sử dụng

.sepia {
  filter: sepia(1);
    -webkit-filter: sepia(1); 
    -moz-filter: sepia(1)
}

0 cho Chrome và Safari và

.sepia {
  filter: sepia(1);
    -webkit-filter: sepia(1); 
    -moz-filter: sepia(1)
}

1 cho Firefox

thang độ xám

.grayscale {
  filter: grayscale(1);
    -webkit-filter: grayscale(1);
    -moz-filter: grayscale(1);}

Thang độ xám xóa màu khỏi hình ảnh của bạn. Giá trị được truyền vào là lượng hiệu ứng xám bạn muốn. Nó được nhập dưới dạng phần trăm hoặc số thập phân, trong đó 0% hoặc 0 không thay đổi và 1 hoặc 100% hoàn toàn là thang độ xám

Bộ lọc thang độ xám

màu nâu đỏ

.sepia {
  filter: sepia(1);
    -webkit-filter: sepia(1); 
    -moz-filter: sepia(1)
}

Một bộ lọc nổi tiếng khác. Màu nâu đỏ mang lại cho hình ảnh của bạn hiệu ứng "già". Giá trị được định dạng dưới dạng phần trăm hoặc số thập phân, trong đó 0% hoặc 0 không thay đổi và 1 hoặc 100% hoàn toàn là màu nâu đỏ

Bộ lọc màu nâu đỏ

Mơ hồ

.blur {
  filter: blur(2px);
   -webkit-filter: blur(2px);
   -moz-filter: blur(2px)
}

Làm mờ tạo ra hiệu ứng làm mờ Gaussian cho hình ảnh. Sự thật thú vị. Một phân phối Gaussian là một phân phối bình thường (trở lại toán học trung học. ). Giá trị là độ lệch chuẩn của hàm Gaussian. Nói cách khác, nó đề cập đến số lượng pixel màn hình hòa trộn với nhau, vì vậy giá trị lớn hơn sẽ tạo ra nhiều mờ hơn, với 0 là không thay đổi

bộ lọc mờ

Đảo ngược

.invert {
  filter: invert(.9);
    -webkit-filter: invert(.9); 
    -moz-filter: invert(.9)
}

Đảo ngược đặt tất cả các giá trị màu của hình ảnh của bạn thành giá trị ngược lại của chúng trên bánh xe màu. Trắng trở thành đen, xanh lá cây trở thành tím, cam trở thành xanh lam. Giá trị được định dạng dưới dạng phần trăm hoặc số thập phân, trong đó 0% hoặc 0 không thay đổi và 1 hoặc 100% sẽ đảo ngược hoàn toàn hình ảnh

Đảo ngược bộ lọc. Mèo quỷ 😈

độ mờ

.opacity {
  filter: opacity(.5);
    -webkit-filter: opacity(.5); 
    -moz-filter: opacity(.5)
}

Đặt mức độ trong suốt mà bạn muốn hình ảnh của mình trở thành. Giá trị được định dạng dưới dạng phần trăm hoặc số thập phân, trong đó 0% hoặc 0 hoàn toàn minh bạch và 1 hoặc 100% không thay đổi

bộ lọc độ mờ

bão hòa

.saturate {
   filter: saturate(10);
    -webkit-filter: saturate(10); 
    -moz-filter: saturate(10)
}

Độ bão hòa tăng cường độ của màu sắc trong hình ảnh của bạn. Giá trị được định dạng dưới dạng phần trăm hoặc số thập phân. 0% hoặc 0 là "chưa bão hòa" và dẫn đến hiệu ứng màu xám. 1 hoặc 100% là không thay đổi. Bất kỳ giá trị nào trên 1 hoặc 100% đều tạo ra hiệu ứng “siêu bão hòa”

bộ lọc bão hòa

Tương phản

________số 8

Độ tương phản là tỷ lệ hình ảnh của các tông màu khác nhau trong một hình ảnh. Sự khác biệt này thiết lập kết cấu, điểm nổi bật, bóng tối, màu sắc và độ rõ nét trong ảnh. Giá trị 0 hoặc 0% sẽ tạo ra hình ảnh có màu xám. Giá trị 1 hoặc 100% là không thay đổi. Giá trị của số tiền trên 1 hoặc 100% làm tăng độ tương phản

bộ lọc tương phản

độ sáng

.brightness {
   filter: brightness(2);
    -webkit-filter: brightness(2); 
    -moz-filter: brightness(2)
}

Bộ lọc độ sáng sẽ làm sáng hoặc tối hình ảnh của bạn. Giá trị được định dạng dưới dạng phần trăm hoặc số thập phân, trong đó 0% hoặc 0 là màu đen và 1 hoặc 100% là không thay đổi. Giá trị trên 1 hoặc 100%, làm sáng hình ảnh

bộ lọc độ sáng

Hue-xoay

.sepia {
  filter: sepia(1);
    -webkit-filter: sepia(1); 
    -moz-filter: sepia(1)
}

Hue-rotate tính đến bánh xe màu. Giá trị là phép đo góc hoặc độ đề cập đến cách màu sắc của hình ảnh của bạn sẽ được điều chỉnh theo bánh xe màu. 0 không thay đổi, chấp nhận giá trị tối đa là 360 độ

Bộ lọc xoay Huế. Đôi mắt màu hồng thật tuyệt

bóng đổ

.sepia {
  filter: sepia(1);
    -webkit-filter: sepia(1); 
    -moz-filter: sepia(1)
}

Bộ lọc bóng đổ tạo ra một bóng đổ mờ, phù hợp với hình dạng của hình ảnh. Hiệu ứng hiển thị đằng sau hình ảnh và màu sắc có thể được áp dụng cho nó

Cú pháp của bộ lọc này liên quan nhiều hơn một chút so với phần còn lại

.sepia {
  filter: sepia(1);
    -webkit-filter: sepia(1); 
    -moz-filter: sepia(1)
}

.sepia {
  filter: sepia(1);
    -webkit-filter: sepia(1); 
    -moz-filter: sepia(1)
}

3 (bắt buộc) → Hai giá trị

.sepia {
  filter: sepia(1);
    -webkit-filter: sepia(1); 
    -moz-filter: sepia(1)
}

4 xác định độ lệch bóng tối.

.sepia {
  filter: sepia(1);
    -webkit-filter: sepia(1); 
    -moz-filter: sepia(1)
}

2 là khoảng cách theo chiều ngang, trong đó các giá trị âm đặt bóng ở bên trái của phần tử.

.sepia {
  filter: sepia(1);
    -webkit-filter: sepia(1); 
    -moz-filter: sepia(1)
}

3 là khoảng cách dọc, trong đó các giá trị âm đặt bóng phía trên phần tử. Nếu cả hai giá trị là

.sepia {
  filter: sepia(1);
    -webkit-filter: sepia(1); 
    -moz-filter: sepia(1)
}

7, bóng nằm chính xác phía sau hình ảnh

.sepia {
  filter: sepia(1);
    -webkit-filter: sepia(1); 
    -moz-filter: sepia(1)
}

8 (tùy chọn) → Bán kính mờ của bóng, được chỉ định là

.sepia {
  filter: sepia(1);
    -webkit-filter: sepia(1); 
    -moz-filter: sepia(1)
}

4. Giá trị càng lớn, bóng càng lớn và mờ hơn. Nếu không được chỉ định, nó sẽ mặc định là

.sepia {
  filter: sepia(1);
    -webkit-filter: sepia(1); 
    -moz-filter: sepia(1)
}

7, dẫn đến cạnh sắc nét, không bị nhòe

```
.blur {
  filter: blur(2px);
   -webkit-filter: blur(2px);
   -moz-filter: blur(2px)
}
```
1 (tùy chọn) → Bán kính trải rộng của bóng, được chỉ định là
```
.sepia {
  filter: sepia(1);
    -webkit-filter: sepia(1); 
    -moz-filter: sepia(1)
}
```
4. Các giá trị dương sẽ làm cho bóng mở rộng, trong khi các giá trị âm sẽ thu nhỏ bóng. Nếu không được chỉ định, nó sẽ mặc định là
```
.sepia {
  filter: sepia(1);
    -webkit-filter: sepia(1); 
    -moz-filter: sepia(1)
}
```
7 và bóng sẽ có cùng kích thước với hình ảnh
màu (tùy chọn) → màu của bóng

Bộ lọc bóng đổ

Nhiều bộ lọc

Bạn có thể sử dụng nhiều bộ lọc và xâu chuỗi chúng lại với nhau cho một hình ảnh. Hãy nhớ rằng thứ tự của các bộ lọc rất quan trọng

Tôi gọi bộ lọc này là “Nàng tiên cá nhỏ”

Giờ đây, bạn đã được trang bị bộ lọc CSS kỳ diệu, bạn có thể thử nghiệm và thử phát triển bộ lọc tùy chỉnh của riêng mình. Tạm biệt Clarendon và Juno, hãy là một bản gốc

Tôi có thể sử dụng CSS làm mờ bộ lọc không?

Thuộc tính backdrop-filter trong CSS được sử dụng để áp dụng các hiệu ứng bộ lọc ( thang độ xám, độ tương phản, độ mờ, v.v.) cho nền/phông nền của phần tử .

Bạn có thể sử dụng nhiều bộ lọc trong CSS không?

Để áp dụng nhiều bộ lọc cho một đối tượng, hãy đưa từng định nghĩa bộ lọc vào danh sách được phân tách bằng dấu cách . Tùy thuộc vào đơn đặt hàng, bạn có thể nhận được một hình ảnh tổng thể khá khác nhau. Hãy xem một số ví dụ. Trong ví dụ này, hãy xem hiệu quả của việc áp dụng cả bộ lọc tương phản và bộ lọc độ sáng cho cùng một đối tượng.

phông nền là gì

Thuộc tính CSS của bộ lọc phông nền cho phép bạn áp dụng các hiệu ứng đồ họa như làm mờ hoặc chuyển màu cho khu vực phía sau một phần tử . Bởi vì nó áp dụng cho mọi thứ phía sau phần tử, để thấy được hiệu ứng, bạn phải làm cho phần tử hoặc nền của phần tử ít nhất trong suốt một phần.

CSS bộ lọc nâu đỏ là gì?

sepia() Hàm CSS sepia() chuyển đổi hình ảnh đầu vào sang màu nâu đỏ, mang lại cho hình ảnh màu vàng/nâu ấm hơn, có màu vàng hơn . Kết quả của nó là một

programming css

Lọc CSS

độ sáng()

mơ hồ()

đảo ngược()

bão hòa ()

bóng đổ ()

tương phản()

độ mờ()

hue-rotate()

thang độ xám()

nâu đỏ()

thang độ xám

màu nâu đỏ

Mơ hồ

Đảo ngược

độ mờ

bão hòa

Tương phản

độ sáng

Hue-xoay

bóng đổ

Nhiều bộ lọc

Tôi có thể sử dụng CSS làm mờ bộ lọc không?

Bạn có thể sử dụng nhiều bộ lọc trong CSS không?

phông nền là gì

CSS bộ lọc nâu đỏ là gì?

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội