Làm tối hình ảnh bằng CSS (Trong bất kỳ hình dạng nào)

Question

Vì vậy, tôi đã thấy khá nhiều cách để làm tối hình ảnh bằng CSS, bao gồm cả hình ảnh có góc tròn, nhưng vấn đề của tôi khác.

Giả sử tôi có hình ảnh .png trông giống như một chú chó nhỏ (chỉ cần đi với nó, tôi không có bất kỳ ví dụ hay nào), khi tôi đặt nó trên trang của mình, tôi cho nó kích thước 100 x 100

Nhưng tôi không thể phủ lên một cái gì đó trên đó, hoặc tô màu toàn bộ hình ảnh, vì nó sẽ khiến nền của con chó bị nhuộm màu, trông xấu xí.

Có thể tô màu hình ảnh có hình dạng tùy ý bằng CSS không?

(Tôi giả sử bạn hiểu điểm của tôi và mã vô dụng là không cần thiết)

Cảm ơn!

Answer 1

Bạn luôn có thể thay đổi độ mờ của hình ảnh, do độ khó của bất kỳ giải pháp thay thế nào có thể là cách tiếp cận tốt nhất.

CSS:

.tinted { opacity: 0.8; } 

Nếu bạn quan tâm đến khả năng tương thích trình duyệt tốt hơn, tôi khuyên bạn nên đọc này:

http://css-tricks.com/css-transparency-settings-for-all-broswers/

Nếu bạn đang xác định đủ, bạn có thể có được điều này làm việc như xa trở lại như IE7 (ai biết!)

Lưu ý: Như JGonzalezD chỉ ra bên dưới, điều này onl y thực sự làm tối hình ảnh nếu màu nền thường tối hơn hình ảnh. Mặc dù kỹ thuật này vẫn có thể hữu ích nếu bạn không muốn làm tối hình ảnh, nhưng thay vào đó bạn muốn làm nổi bật hình ảnh đó trên di chuột/tiêu điểm/trạng thái khác vì bất kỳ lý do gì.

Answer 2

Webkit only solution

giải pháp nhanh, dựa trên -webkit-mask-image tài sản. -webkit-mask-image đặt hình ảnh mặt nạ cho một phần tử.

Có một vài gotchas với phương pháp này:

• Rõ ràng, chỉ hoạt động trong các trình duyệt Webkit
• Đòi hỏi một wrapper thêm để áp dụng các psuedo-yếu tố :after (IMG thẻ không thể có :before/:after pseudo elements, grr)
• Vì có trình bao bọc bổ sung, tôi không chắc chắn cách sử dụng hàm attr(…) CSS để nhận URL thẻ IMG, do đó mã này được mã hóa riêng vào CSS một cách riêng biệt.

Nếu bạn có thể xem qua những vấn đề đó, đây có thể là giải pháp khả thi. Bộ lọc SVG thậm chí sẽ linh hoạt hơn và các giải pháp Canvas thậm chí sẽ linh hoạt hơn và có phạm vi hỗ trợ rộng hơn (SVG không hỗ trợ Android 2.x).

Answer 3

Tôi sẽ tạo một hình ảnh mới về hình bóng của chú chó (màu đen) và phần còn lại giống như hình ảnh gốc.Trong html, thêm một div wrapper với hình bóng này làm nền. Bây giờ, làm cho hình ảnh ban đầu nửa công khai. Con chó sẽ trở nên tối hơn và nền của con chó sẽ vẫn như cũ. Bạn có thể làm: các thủ thuật di chuột bằng cách đặt độ mờ của hình ảnh gốc thành 100% khi di chuột. Sau đó, con chó bật ra khi bạn di chuột qua anh ta!

phong cách

.wrapper{background-image:url(silhouette.png);} 
.original{opacity:0.7:} 
.original:hover{opacity:1} 

<div class="wrapper"> 
    <div class="img"> 
    <img src="original.png"> 
    </div> 
</div> 

Answer 4

Dễ dàng như

img { 
    filter: brightness(50%); 
}