Gần đây tôi đã phải thay đổi màu của một hình ảnh màu trắng. Vì hình ảnh này được hiển thị bởi một thư viện không cho phép thay thế nó bằng một hình ảnh khác nên nó phải được thực hiện bằng CSS. Mặc dù có một giải pháp tương đối đơn giản cho nó, nhưng nó tỏ ra khá khó khăn để đưa ra giải pháp đó

Chúng ta hãy đi đến đó

nên dễ dàng

Chỉ cần thêm bộ lọc hue-rotate, bộ lọc đó sẽ hoạt động

Xem Pen Hue Rotate của Dominik Weber [@domysee] trên CodePen

Nhưng nó không. Tất nhiên là không, điều đó sẽ quá dễ dàng. Ảnh vẫn trắng

Tại sao nó không hoạt động?

Sau khi kiểm tra một vài lần xem bộ lọc có thực sự được áp dụng hay không, tôi chợt nhận ra
Màu trắng có giá trị độ sáng là 100%, vì vậy việc thay đổi màu sắc sẽ không ảnh hưởng gì. Trên thực tế, màu trắng có giá trị màu bằng 0, màu đỏ. Vì vậy, tôi nên biết trước rằng việc thay đổi màu sắc sẽ không hiệu quả, thật ngớ ngẩn

Thay đổi độ sáng sau đó

Vì độ sáng 100% là màu trắng và 0% là màu đen, 50% sẽ dẫn đến màu sắc phong phú. Hãy thử điều đó

Có thể thay đổi độ sáng bằng bộ lọc brightness, thay đổi độ sáng dựa trên hệ số đã cho

Xem Độ sáng của bút của Dominik Weber [@domysee] trên CodePen

Được rồi, một cái gì đó đã thay đổi, đó là tốt. Nhưng kết quả không như mong đợi. không có màu. Hình ảnh chỉ có màu xám

Chuyện gì đã xảy ra thế?

Độ sáng hiện là 50%, như mong đợi. Nhưng tôi quên mất độ bão hòa. Vì màu trắng có độ sáng 100%, tôi nghĩ rằng độ bão hòa cũng sẽ là 100%. Thật không may, nó là 0%, gây ra màu xám

Vì vậy, thay đổi độ bão hòa

Nếu có bộ lọc brightness, thì chắc chắn có bộ lọc saturate. Và vâng, có
Hãy đặt độ bão hòa thành 100% sau đó

Xem Độ sáng bão hòa của bút của Dominik Weber [@domysee] trên CodePen

Một lần nữa, không có gì thay đổi
Hóa ra, bộ lọc saturate hoạt động giống như bộ lọc brightness. Nó chỉ thay đổi giá trị dựa trên yếu tố đã cho. Bây giờ đó là một vấn đề. Như môn toán ở trường tiểu học đã dạy chúng tôi, mọi thứ thời gian 0 đều là 0
Điều này làm cho bộ lọc saturate vô dụng cho mục đích này

Thời gian để từ bỏ?

Vẫn chưa. Có một vài bộ lọc khác để thử. Hãy đi qua chúng

• hue-rotate0. rõ ràng là không thay đổi màu sắc
• hue-rotate1. không làm gì trong một hình ảnh màu xám
• hue-rotate2. cũng không đổi màu
• hue-rotate3. tốt, không thể làm cho hình ảnh xám trở nên xám hơn
• hue-rotate. toàn bộ vấn đề là làm cho màu sắc hiển thị, một màu sắc khác sẽ không thay đổi bất cứ điều gì
• hue-rotate5. đảo ngược màu xám, thật đáng buồn, chỉ dẫn đến một biến thể khác của màu xám
• hue-rotate6. có thể làm cho một màu khác tỏa sáng, nhưng đó không phải là điều tôi theo đuổi
• hue-rotate7. đó là cái cuối cùng. Và cuối cùng, có vẻ như nó có thể hoạt động

Ví dụ về tài liệu MDN có vẻ rất hứa hẹn

Hãy thử nó ra

Xem Pen Sepia của Dominik Weber [@domysee] trên CodePen

Điều đó đã thay đổi một cái gì đó? . Hầu hết. Bằng cách kiểm tra với bảng chọn màu, tôi phát hiện ra rằng màu thực tế là hue-rotate8
Điều đó có nghĩa là, chúng ta đã bão hòa. Cuối cùng một số kết quả. tada

Từ đó, giờ đây có thể áp dụng các bộ lọc khác để đạt được kết quả mong muốn

Cho phép xem một số màu sắc

Tôi đã viết đủ về thử và sai rồi. Để tôi tiết kiệm thời gian cho bạn và chỉ cho bạn cách để có được màu đỏ thuần

Bộ lọc CSS là một công cụ mạnh mẽ mà các tác giả có thể sử dụng để đạt được các hiệu ứng hình ảnh khác nhau [giống như bộ lọc Photoshop cho trình duyệt]. Thuộc tính CSS

.do-more-things {
  filter: blur[20px] grayscale[20%];
}

4 cung cấp quyền truy cập vào các hiệu ứng như làm mờ hoặc chuyển màu trên kết xuất của phần tử trước khi phần tử được hiển thị. Bộ lọc thường được sử dụng để điều chỉnh kết xuất của hình ảnh, nền hoặc đường viền

Cú pháp là

.filter-me {
  filter: blur[3px];
  filter: grayscale[1];
  filter: saturate[2.2];

  filter: none; /* remove existing filter */
}

Có một số chức năng để sử dụng cho giá trị

• .do-more-things {
    filter: blur[20px] grayscale[20%];
  }

  5

• .do-more-things {
    filter: blur[20px] grayscale[20%];
  }

  6

• .do-more-things {
    filter: blur[20px] grayscale[20%];
  }

  7

• .do-more-things {
    filter: blur[20px] grayscale[20%];
  }

  8

• .do-more-things {
    filter: blur[20px] grayscale[20%];
  }

  9

• filter: grayscale[20%]
  
  /* same as.. */
  filter: grayscale[0.2];

  0

• filter: grayscale[20%]
  
  /* same as.. */
  filter: grayscale[0.2];

  1

• filter: grayscale[20%]
  
  /* same as.. */
  filter: grayscale[0.2];

  2

• filter: grayscale[20%]
  
  /* same as.. */
  filter: grayscale[0.2];

  3

• filter: grayscale[20%]
  
  /* same as.. */
  filter: grayscale[0.2];

  4

• filter: grayscale[20%]
  
  /* same as.. */
  filter: grayscale[0.2];

  5 – để áp dụng các bộ lọc SVG

• filter: grayscale[20%]
  
  /* same as.. */
  filter: grayscale[0.2];

  6 – “sắp ra mắt”

Có thể sử dụng nhiều chức năng, ngăn cách không gian

.do-more-things {
  filter: blur[20px] grayscale[20%];
}

Dự phòng nhúng CodePen

Chức năng lọc

Để sử dụng thuộc tính bộ lọc CSS, bạn chỉ định một giá trị cho một trong các chức năng sau được liệt kê ở trên. Nếu giá trị không hợp lệ, hàm trả về “none. ” Trừ khi được ghi chú, các hàm nhận giá trị được biểu thị bằng dấu phần trăm [như trong 34%] cũng chấp nhận giá trị được biểu thị dưới dạng thập phân [như trong 0. 34]

Đây là bản demo cho phép bạn chơi với các bộ lọc riêng lẻ một chút

Dự phòng nhúng CodePen

thang độ xám[]

filter: grayscale[20%]

/* same as.. */
filter: grayscale[0.2];

Chuyển đổi hình ảnh đầu vào thành thang độ xám. Giá trị của "số tiền" xác định tỷ lệ chuyển đổi. Giá trị 100% là thang độ xám hoàn toàn. Giá trị 0% khiến đầu vào không thay đổi. Các giá trị từ 0% đến 100% là hệ số nhân tuyến tính đối với hiệu ứng. Nếu thông số “số tiền” bị thiếu, giá trị 100% sẽ được sử dụng. Giá trị âm không được phép

nâu đỏ[]

filter: sepia[0.8];

/* same as.. */
filter: sepia[80%];

Chuyển đổi hình ảnh đầu vào sang màu nâu đỏ. Giá trị của "số tiền" xác định tỷ lệ chuyển đổi. Giá trị 100% hoàn toàn là màu nâu đỏ. Giá trị 0 khiến đầu vào không thay đổi. Các giá trị từ 0% đến 100% là hệ số nhân tuyến tính đối với hiệu ứng. Nếu thông số “số tiền” bị thiếu, giá trị 100% sẽ được sử dụng. Giá trị âm không được phép

bão hòa []

filter: saturate[2];

/* same as.. */
filter: saturate[200%];

Làm bão hòa hình ảnh đầu vào. Giá trị của "số tiền" xác định tỷ lệ chuyển đổi. Giá trị 0% là hoàn toàn không bão hòa. Giá trị 100% khiến đầu vào không thay đổi. Các giá trị khác là hệ số nhân tuyến tính trên hiệu ứng. Giá trị trên 100% được cho phép, cung cấp kết quả siêu bão hòa. Nếu thông số “số tiền” bị thiếu, giá trị 100% sẽ được sử dụng. Giá trị âm không được phép

hue-rotate[]

filter: hue-rotate[180deg];

/* same as.. */
filter: hue-rotate[0.5turn];

Áp dụng xoay màu sắc trên hình ảnh đầu vào. Giá trị của "góc" xác định số độ xung quanh vòng tròn màu mà các mẫu đầu vào sẽ được điều chỉnh. Giá trị 0deg khiến đầu vào không thay đổi. Nếu thông số “góc” bị thiếu, giá trị của

filter: grayscale[20%]

/* same as.. */
filter: grayscale[0.2];

7 sẽ được sử dụng. Giá trị tối đa là

filter: grayscale[20%]

/* same as.. */
filter: grayscale[0.2];

8

đảo ngược[]

filter: invert[100%];

Đảo ngược các mẫu trong hình ảnh đầu vào. Giá trị của "số tiền" xác định tỷ lệ chuyển đổi. Giá trị 100% bị đảo ngược hoàn toàn. Giá trị 0% khiến đầu vào không thay đổi. Các giá trị từ 0% đến 100% là hệ số nhân tuyến tính đối với hiệu ứng. Nếu thông số “số tiền” bị thiếu, giá trị 100% sẽ được sử dụng. Giá trị âm không được phép

độ mờ[]

filter: opacity[0.5];

/* same as.. */
filter: opacity[50%];

Áp dụng độ trong suốt cho các mẫu trong ảnh đầu vào. Giá trị của "số tiền" xác định tỷ lệ chuyển đổi. Giá trị 0% là hoàn toàn minh bạch. Giá trị 100% khiến đầu vào không thay đổi. Các giá trị từ 0% đến 100% là hệ số nhân tuyến tính đối với hiệu ứng. Điều này tương đương với việc nhân các mẫu hình ảnh đầu vào với số lượng. Nếu thông số “số tiền” bị thiếu, giá trị 100% sẽ được sử dụng. Chức năng này tương tự như thuộc tính độ mờ được thiết lập nhiều hơn; . Giá trị âm không được phép

độ sáng[]

filter: brightness[0.5];

/* same as.. */
filter: brightness[50%];

Áp dụng một hệ số nhân tuyến tính cho hình ảnh đầu vào, làm cho nó sáng hơn hoặc kém hơn. Giá trị 0% sẽ tạo ra hình ảnh có màu đen hoàn toàn. Giá trị 100% khiến đầu vào không thay đổi. Các giá trị khác là hệ số nhân tuyến tính trên hiệu ứng. Giá trị của số tiền trên 100% được cho phép, mang lại kết quả tốt hơn. Nếu thông số “số tiền” bị thiếu, giá trị 100% sẽ được sử dụng

trái ngược[]

filter: contrast[4];

/* same as.. */
filter: contrast[400%];

Điều chỉnh độ tương phản của đầu vào. Giá trị 0% sẽ tạo ra hình ảnh có màu đen hoàn toàn. Giá trị 100% khiến đầu vào không thay đổi. Cho phép các giá trị trên số tiền trên 100%, mang lại kết quả có độ tương phản thấp hơn. Nếu thông số “số tiền” bị thiếu, giá trị 100% sẽ được sử dụng

mơ hồ[]

.do-more-things {
  filter: blur[20px] grayscale[20%];
}

0

Áp dụng độ mờ Gaussian cho hình ảnh đầu vào. Giá trị của 'bán kính' xác định giá trị của độ lệch chuẩn đối với hàm Gaussian hoặc số pixel trên 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. Nếu không có tham số nào được cung cấp thì giá trị 0 được sử dụng. Tham số được chỉ định dưới dạng độ dài CSS, nhưng không chấp nhận giá trị phần trăm

bóng đổ []

.do-more-things {
  filter: blur[20px] grayscale[20%];
}

1

Áp dụng hiệu ứng bóng đổ cho hình ảnh đầu vào. Bóng đổ thực sự là một phiên bản bù, mờ của mặt nạ alpha của hình ảnh đầu vào được vẽ bằng một màu cụ thể, được kết hợp bên dưới hình ảnh. Hàm chấp nhận một tham số loại [được xác định trong Nền CSS3], ngoại trừ từ khóa 'inset' không được phép

Chức năng này tương tự như thuộc tính box-shadow được thiết lập nhiều hơn;

Bóng đổ cũng bắt chước đường viền của các đối tượng dự định một cách tự nhiên không giống như

filter: grayscale[20%]

/* same as.. */
filter: grayscale[0.2];

9 chỉ coi hộp là đường dẫn của nó

Dự phòng nhúng CodePen

Cũng giống như với text-shadow, không có tham số 'spread' để tạo bóng đặc lớn hơn đối tượng

url[]

.do-more-things {
  filter: blur[20px] grayscale[20%];
}

2

Hàm

filter: grayscale[20%]

/* same as.. */
filter: grayscale[0.2];

5 lấy vị trí của tệp XML chỉ định bộ lọc SVG và có thể bao gồm một liên kết đến một thành phần bộ lọc cụ thể. Đây là một hướng dẫn hoạt động như một phần giới thiệu thú vị về các bộ lọc SVG với bản trình diễn thú vị

Dự phòng nhúng CodePen

Bộ lọc hoạt hình

Vì các Bộ lọc có thể hoạt ảnh nên nó có thể mở ra nhiều cơ hội thú vị

Dự phòng nhúng CodePen

ghi chú

Bạn có thể kết hợp bất kỳ hàm nào để thao tác kết xuất, nhưng thứ tự vẫn quan trọng [i. e. , sử dụng

.do-more-things {
  filter: blur[20px] grayscale[20%];
}

9 sau

filter: grayscale[20%]

/* same as.. */
filter: grayscale[0.2];

4 sẽ dẫn đến đầu ra hoàn toàn màu xám]

Một giá trị được tính toán khác với “none” dẫn đến việc tạo ngữ cảnh xếp chồng giống như cách mà độ mờ của CSS thực hiện. Thuộc tính bộ lọc không ảnh hưởng đến hình dạng của mô hình hộp của phần tử đích, mặc dù các bộ lọc có thể tạo ra bức tranh bên ngoài hộp viền của phần tử. Bất kỳ phần nào của phần tử đích đều bị ảnh hưởng bởi các hàm lọc. Điều này bao gồm mọi nội dung, nền, đường viền, trang trí văn bản, đường viền và cơ chế cuộn có thể nhìn thấy của phần tử mà bộ lọc được áp dụng và những phần tử con của nó. Bộ lọc cũng có thể được áp dụng cho nội dung nội tuyến, chẳng hạn như các đoạn văn bản riêng lẻ

Thông số kỹ thuật cũng giới thiệu chức năng trình bao bọc

filter: sepia[0.8];

/* same as.. */
filter: sepia[80%];

3 cho hình ảnh. Nó sẽ cho phép bạn lọc bất kỳ hình ảnh nào tại thời điểm bạn sử dụng nó trong CSS. Ví dụ: bạn có thể làm mờ hình nền mà không làm mờ văn bản. Chức năng lọc này chưa được hỗ trợ trong các trình duyệt. Trong thời gian chờ đợi, bạn có thể áp dụng cả nền và bộ lọc cho phần tử giả để tạo hiệu ứng tương tự

Công cụ lọc độc quyền của IE

Cũng đã sử dụng thuộc tính

.do-more-things {
  filter: blur[20px] grayscale[20%];
}

4, như

.do-more-things {
  filter: blur[20px] grayscale[20%];
}

3

Chủ yếu được sử dụng cho độ mờ khi bạn cần hỗ trợ IE 8 trở xuống

Thêm thông tin

• Đặc tả hiệu ứng bộ lọc W3C
• Thư viện bộ lọc của Bennett Feely
• Tài liệu MDN
• Bộ lọc CSS polyfill
• Hiểu các hiệu ứng bộ lọc CSS

Hỗ trợ trình duyệt

Dữ liệu hỗ trợ trình duyệt này đến từ , có nhiều chi tiết hơn. Một số cho biết rằng trình duyệt hỗ trợ tính năng ở phiên bản đó trở lên

Làm cách nào để thay đổi màu hình ảnh bằng bộ lọc CSS?

Tôi có thể thay đổi màu hình ảnh trong CSS không?

Thả bộ lọc là gì