Có cách nào để tô màu hình ảnh PNG trắng chỉ với CSS không?

Question

Tôi biết có rất nhiều bộ lọc css ở đó đặc biệt cho webkit, nhưng tôi không thể tìm thấy một giải pháp cho colorize một màu trắng (#FFFFFF) hình ảnh. Tôi đã thử một số kết hợp của các bộ lọc, nhưng không ai trong số họ làm cho hình ảnh của tôi colorized. Tôi chỉ có thể thay đổi hình ảnh trong phạm vi màu xám hoặc màu nâu đỏ.

Vì vậy, câu hỏi của tôi là: Có cách nào để thay đổi png hoàn toàn trắng của tôi thành (ví dụ) màu đỏ chỉ bằng css không?

Giống như hiển thị trên hình ảnh này:

Answer 1

Điều này có thể được thực hiện với css mặt nạ, mặc dù không may hỗ trợ trình duyệt thực sự là xấu (Tôi tin webkit chỉ).

http://jsfiddle.net/uw1mu81k/1/

-webkit-mask-box-image: url(http://yourimagehere); 

Bởi vì hình ảnh của bạn là tất cả màu trắng, nó là một ứng cử viên hoàn hảo cho mặt nạ. Cách mặt nạ hoạt động là bất cứ nơi nào hình ảnh có màu trắng, phần tử gốc được hiển thị như bình thường, nơi phần tử gốc màu đen (hoặc trong suốt) không được hiển thị. Bất cứ điều gì ở giữa đều có mức độ minh bạch.

EDIT:

Bạn cũng có thể có được điều này để làm việc trong FireFox với sự giúp đỡ nhỏ từ svg.

http://jsfiddle.net/uw1mu81k/4/

div { 
 
    width: 50px; 
 
    height: 50px; 
 
    mask: url(#mymask); 
 
    -webkit-mask-box-image: url(http://www.clker.com/cliparts/F/5/I/M/f/U/running-icon-white-on-transparent-background-md.png); 
 
}

<div style="background-color: red;"></div> 
 
<div style="background-color: blue;"></div> 
 
<div style="background-color: green;"></div> 
 
<div style="background-color: orange;"></div> 
 
<div style="background-color: purple;"></div> 
 

 
<svg height="0" width="0"> 
 
    <mask id="mymask"> 
 
    <image id="img" xlink:href="http://www.clker.com/cliparts/F/5/I/M/f/U/running-icon-white-on-transparent-background-md.png" x="0" y="0" height="50px" width="50px" /> 
 
    </mask> 
 
</svg>

Answer 2

Điều này có thể được thực hiện với một bộ lọc CSS tham chiếu một bộ lọc SVG (trình duyệt webkit + firefox). Đây là bộ lọc SVG.

<svg width="800px" height="600px"> 
    <filter id="redden"> 
    <feColorMatrix type="matrix" values="1 1 1 0 0 
             0 0 0 0 0 
             0 0 0 0 0 
             0 0 0 1 0"/> 
    </filter> 

<image filter="url(#redden)" width="190" height="400" preserveAspectRatio="xMinYMin slice" xlink:href="http://i.stack.imgur.com/e6MUC.jpg"/> 
</svg> 

Answer 3

Gần đây tôi có cùng một câu hỏi và tôi nghĩ cách tiếp cận này đáng để chia sẻ cho người đọc trong tương lai. Hãy thử điều này

filter: brightness(50%) sepia(100) saturate(100) hue-rotate(25deg); 

sáng sẽ tối hình ảnh, nâu đỏ sẽ làm cho nó một chút màu vàng, làm ướt để tăng màu sắc, và cuối cùng hue-xoay để thay đổi màu sắc. Nó không phải cross trình duyệt thân thiện mặc dù:

• Nó không được hỗ trợ trên IE

• Mở chrome, hue-rotate(25deg) sẽ làm cho bất kỳ hình ảnh màu đỏ, nhưng bạn cần giá trị âm trong firefox ví dụ hue-rotate(-25deg) để làm cho màu đỏ.
  Bạn có thể sử dụng để nhắm mục tiêu các trình duyệt mozilla: https://css-tricks.com/snippets/css/css-hacks-targeting-firefox/

Dưới đây là một số lời khuyên hữu ích và các công cụ mà tôi đã sử dụng khi tôi làm việc với hình ảnh/biểu tượng sử dụng css:

• Nếu bạn có phiên bản svg của hình ảnh, bạn có thể chuyển đổi chúng thành các biểu tượng phông chữ bằng công cụ này https://icomoon.io/. Để thay đổi màu sắc, bạn chỉ cần color:#f00; giống như màu phông chữ.
• Nếu bạn cần đạt được hiệu ứng này cho trạng thái di chuột, hãy sử dụng hình ảnh màu đỏ với filter: brightness(0) invert(); trên trạng thái không di chuột và filter: brightness(1); trên trạng thái di chuột. Hovever này sẽ vẫn không hoạt động trên IE
• Sử dụng trang tính ma. Bạn có thể tự tạo bản thân bằng cách sử dụng công cụ chỉnh sửa hình ảnh hoặc sử dụng các trình tạo trang tính có sẵn trên mạng. Sau đó, bạn có thể sử dụng SpriteCow để lấy css cho mỗi hình ảnh con của spritesheet của bạn.