Làm thế nào để tô màu một hình ảnh trong CSS?

Question

Có cách nào để sử dụng CSS để thay đổi độ bóng của hình ảnh không. Ví dụ: nếu tôi có biểu tượng thang độ xám (yếu tố img), tôi muốn nó thay đổi màu sắc thành nâu đỏ khi di chuột.

Nó sẽ phải hoạt động trên các trình duyệt khác ngoài IE, vì vậy tôi không thể sử dụng bộ lọc. Có một số trick CSS 3 mà sẽ cho phép điều đó?

Answer 1

nếu bạn muốn sửa đổi hình ảnh trong css, bạn không thể thực hiện điều đó. nhưng bạn có thể chơi với thuộc tính opacity. vâng, chỉ đặt độ mờ của hình ảnh, nhưng nó sẽ là một hiệu ứng tốt đẹp. đây là một ví dụ:

img{-webkit-transition:opacity .3s ease-in-out;} 
img:hover{opacity:.6} 

đoạn mã đó sẽ mang lại hiệu ứng chuyển tiếp hình ảnh mờ dần vào trong suốt.

trong trường hợp khác, bạn có thể sử dụng hình ảnh để làm những gì bạn muốn :)

Answer 2

Không có cú pháp chuẩn hóa trình duyệt chéo cho điều này mà tôi biết. Tuy nhiên, bạn có thể sử dụng HTML5 Canvas và tự mình thực hiện hiệu ứng này. Sử dụng SVG cũng có thể hoạt động, nhưng tôi không chắc chắn về mức độ hoạt động của tất cả các trình duyệt, cụ thể là bộ dò tìm Internet, hỗ trợ SVG.

SVG ví dụ sử dụng một ma trận màu transform: http://www.dhmedia.com.au/sites/default/files/examples/SVG-filters/sepia.xhtml

Answer 3

Không có chính xác cách để làm điều này trong CSS, như đã đề cập đã bạn có thể sử dụng các công nghệ khác để làm như vậy - cụ thể là Javascript.

Trong rất cơ bản nghĩa nào đó, bạn có thể cố gắng để bắt chước một phong cách màu nâu đỏ bằng cách phủ một div trên đỉnh của một hình ảnh với một màu nâu đỏ như màu sắc và một opacity rgba(94, 38, 18, 0.2) - nhưng phương pháp này là khá thô. Bạn thậm chí có thể che phủ bằng cách sử dụng một hình ảnh trong suốt, mà có thể là tốt hơn so với tùy chọn này (nhưng vẫn còn khá rác).