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

thang độ xám

Việc đặt thang độ xám cho hình ảnh được thực hiện theo tỷ lệ phần trăm như trong đoạn mã CSS mẫu bên dưới và so sánh song song như được hiển thị trong Hình B (Google Chrome Phiên bản 22. 0. 1229. 94 mét)

Thang độ xám được đặt thành năm mươi phần trăm

/* Grayscale Filter Effect */

       -webkit-filter: grayscale(50%);

}

Hình B

Huế xoay

Đặt xoay màu sắc là hiệu ứng bộ lọc để thay đổi màu sắc của hình ảnh bằng cách xoay các giá trị RGBA xung quanh ma trận màu. Cài đặt được thực hiện với cài đặt mức độ xoay từ 0 độ đến 360 độ. Ví dụ xoay màu sắc được hiển thị trong đoạn mã CSS ví dụ bên dưới và so sánh song song như được hiển thị trong Hình C

Xoay Huế được đặt thành 180 độ

/* Hue Rotation Filter Effect */

img.sepia {
	filter: sepia(100%);
}

}

Hình C

Đảo ngược

Hiệu ứng bộ lọc đảo ngược đảo ngược các giá trị màu sắc, độ bão hòa và độ sáng của nội dung của đối tượng và được biểu thị dưới dạng phần trăm. Ví dụ đảo ngược được hiển thị trong đoạn mã CSS mẫu bên dưới và so sánh song song như được hiển thị trong Hình D

Đảo ngược được đặt thành 100%

img.sepia {
	filter: sepia(100%);
}

Hình dung

độ mờ

Hiệu ứng bộ lọc độ mờ được đo bằng mức độ từ hoàn toàn trong suốt đến hoàn toàn mờ đục và được đo từ 0 đến 100, với 0 là hoàn toàn trong suốt và 100 là hoàn toàn mờ đục. Ví dụ về độ mờ được hiển thị trong đoạn mã CSS bên dưới và so sánh song song như được hiển thị trong Hình E

Độ mờ được đặt thành năm mươi phần trăm

.grayscale {

.grayscale {

.grayscale {

}

Hình E

bão hòa

Bộ lọc bão hòa được sử dụng để thay đổi cường độ màu trong phần tử. Một yếu tố bão hòa có màu sắc quá tươi sáng; . Lượng bão hòa có thể được biểu thị bằng tỷ lệ phần trăm, trong đó giá trị 0% là hoàn toàn không bão hòa và giá trị 100% khiến đầu vào không thay đổi. Các giá trị trên 100% làm tăng mức độ bão hòa. Ví dụ này cho thấy mức độ bão hòa cho hình ảnh bên phải được đặt thành 250% như được hiển thị trong Hình F như được hiển thị trong Google Chrome Phiên bản 22. 0. 1229. 94 mét

Đoạn mã CSS

.grayscale {

.grayscale {

}

Hình F

màu nâu đỏ

Hiệu ứng bộ lọc nâu đỏ là tông màu nâu xám đến nâu vàng đậm được truyền cho một phần tử và được biểu thị bằng tỷ lệ phần trăm từ 0% đến 100%. Ví dụ được hiển thị bên dưới hiển thị hiệu ứng bộ lọc CSS3 sepia trên hình ảnh bên phải với cài đặt 100%

       -webkit-filter: grayscale(50%);

       -webkit-filter: grayscale(50%);

       -webkit-filter: grayscale(50%);

}

Hình G

Kết hợp các hiệu ứng

Bạn cũng có thể kết hợp các hiệu ứng bộ lọc với kết quả rất tốt;

Hiệu ứng kết hợp đen trắng

Sử dụng kết hợp các hiệu ứng bộ lọc CSS sau đây sẽ tạo ra hiệu ứng đen trắng sắc nét như thể hiện trong Hình H

       -webkit-filter: grayscale(50%);

       -webkit-filter: grayscale(50%);

}

Hình H

hỗ trợ trình duyệt

Như bạn có thể nhận thấy từ tiền tố nhà cung cấp trong đoạn mã CSS, Webkit hiện là công cụ bố cục được hỗ trợ duy nhất cho các hiệu ứng bộ lọc CSS. WebKit hỗ trợ trình duyệt Apple Safari và Google Chrome. Có thể tìm thấy hỗ trợ tác nhân người dùng và trình duyệt hiện tại từ bảng “Tôi có thể sử dụng…” cho Hiệu ứng bộ lọc CSS3;

Đừng vội cất phần mềm chỉnh sửa hình ảnh đó đi;

Bộ lọc nâu đỏ hoạt động như thế nào?

Hiệu ứng tông màu nâu đỏ là gì?

Màu nâu đỏ là màu gì?

Màu nâu đỏ trong đồ họa máy tính là gì?