Đơn điệu một hình ảnh với CSS - Thủ thuật CSS

Anonim

Bạn luôn có thể áp dụng bộ lọc cho một phần tử để làm cho phần tử đó trở nên đơn điệu theo nghĩa thang độ xám:

Xem Pen Monotone-ing một hình ảnh của Chris Coyier (@chriscoyier) trên CodePen.

Nếu bạn đặt nó trong một vùng chứa có màu nền và giảm độ mờ, bạn có thể nhận được một loại hiệu ứng đơn màu:

Xem Pen Monotone-ing một hình ảnh của Chris Coyier (@chriscoyier) trên CodePen.

Maarten van der Velde đã viết để nói rằng thay vì giảm độ mờ, chúng ta có thể kết hợp nó với mix-blend-modevà làm giảm độ tương phản:

Xem Pen Monotone-ing một hình ảnh của Chris Coyier (@chriscoyier) trên CodePen.

Amelia Bellamy-Royds cũng sử dụng bộ lọc màu SVG để làm điều này, có khả năng kiểm soát đáng kinh ngạc:

Xem Pen SVG Filters Grey -> Invert Monochrome Color của Amelia Bellamy-Royds (@AmeliaBR) trên CodePen.