Lọc CSS trắng
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 đó Show
Chúng ta hãy đi đến đó nên dễ dàngChỉ cần thêm bộ lọc 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 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 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òaNếu có bộ lọc 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 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
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à 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ắcTô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 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ềnCú pháp là
Có một số chức năng để sử dụng cho giá trị
Có thể sử dụng nhiều chức năng, ngăn cách không gian
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()
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 đỏ()
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 ()
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()
Á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 7 sẽ được sử dụng. Giá trị tối đa là 8đảo ngược()
Đả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ờ()
Á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()
Á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()
Đ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ồ() 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 đổ () 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ư 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() 2Hàm 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ìnhVì 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 9 sau 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 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 IECũng đã sử dụng thuộc tính 4, như 3Chủ 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
Hỗ trợ trình duyệtDữ 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?Để làm như vậy, chúng ta sẽ làm theo cú pháp đã cho. . lọc. nâu đỏ(). hue-rotate(). bão hòa () Thay đổi màu của hình ảnh thành màu xanh lam.img { bộ lọc. nâu đỏ (100%) màu sắc xoay (190 độ) bão hòa (900%);. Thay đổi màu của hình ảnh thành xanh nhạt.img { bộ lọc. nâu đỏ (300%) màu sắc xoay (150 độ) bão hòa (450%); Tôi có thể thay đổi màu hình ảnh trong CSS không?Chúng tôi có thể thay đổi màu của hình ảnh PNG bằng cách sử dụng các kiểu CSS sau. lọc. không ai. mơ hồ(). độ sáng(). trái ngược(). bóng đổ (). thang độ xám(). hue-rotate(). đảo ngược(). độ mờ(). bão hòa (). nâu đỏ(). url(). ban đầu. thừa kế;
Thả bộ lọc là gìbộ lọc. bóng đổ (0 0 0. 75rem đỏ thẫm); . Ghi chú. Hàm này hơi giống với thuộc tính box-shadow. a blurred, offset version of the input image's alpha mask, drawn in a specific color and composited below the image. Note: This function is somewhat similar to the box-shadow property. |