Cách thay đổi màu của hình ảnh khi di chuột

Question

Tôi cần thay đổi màu nền của hình ảnh. Hình ảnh là một hình tròn với nền trắng, tôi cần khi bạn di chuột qua nó, thay đổi hình nền của hình tròn thành màu xanh lam. Tôi chỉ cần vòng tròn để thay đổi.

HTML code của tôi là

<div class="fb-icon"> 
<a href="http://www.facebook.com/mypage" target="_blank"> 
<img src="images/fb_normal.png" alt="Facebook"> 
</a> 
</div> 

Trong CSS tôi đã viết:

.fb-icon:hover { 
    background: blue; 
} 

Đoạn mã trên mang lại cho tôi màu xanh nhưng như một khung xung quanh biểu tượng vòng tròn. những gì tôi cần là thay đổi nền của vòng tròn. Hãy tưởng tượng nó giống như một tín hiệu màu trắng khi bạn di chuột qua nó chuyển sang màu xanh dương.

Xin vui lòng tôi cần một giải pháp nếu nó có thể được thực hiện bởi CSS hoặc bất cứ điều gì. Xin lỗi nếu tôi làm quá lâu.

Vấn đề: link

Answer 1

Lý tưởng nhất là bạn nên sử dụng PNG trong suốt với hình tròn màu trắng và nền của hình ảnh trong suốt. Sau đó, bạn có thể đặt background-color của số .fb-icon thành màu xanh lam khi di chuột. Vì vậy, bạn sẽ là CSS:

fb-icon{ 
    background:none; 
} 

fb-icon:hover{ 
    background:#0000ff; 
} 

Ngoài ra, nếu bạn không muốn sử dụng PNG, bạn cũng có thể sử dụng sprite và thay đổi vị trí nền. Sprite là một hình ảnh lớn với một bộ sưu tập các hình ảnh nhỏ hơn có thể được sử dụng làm hình nền bằng cách thay đổi vị trí nền. Vì vậy, ví dụ: nếu hình ảnh vòng tròn ban đầu của bạn có nền trắng là 100px X 100px, bạn có thể tăng chiều cao của hình ảnh lên 100px X 200px, sao cho nửa trên cùng là hình ảnh gốc với nền trắng trong khi nửa dưới là hình ảnh mới với nền màu xanh lam. Sau đó, bạn thiết lập cài đặt CSS của bạn như:

fb-icon{ 
    background:url('path/to/image/image.png') no-repeat 0 0; 
} 

fb-icon:hover{ 
    background:url('path/to/image/image.png') no-repeat 0 -100px; 
} 

Answer 2

Nếu tôi hiểu đúng thì nó sẽ dễ dàng hơn nếu bạn đưa hình ảnh của bạn có nền trong suốt và thiết lập thuộc tính background-color container nền mà không cần phải sử dụng các bộ lọc và vân vân.

http://www.ajaxblender.com/howto-convert-image-to-grayscale-using-javascript.html

Hiển thị bạn làm thế nào để sử dụng bộ lọc trong IE. Có lẽ nếu bạn tận dụng thứ gì đó từ đó. Mặc dù vậy, không tương thích với nhiều trình duyệt. Một tùy chọn khác có thể là có hai hình ảnh và sử dụng chúng làm hình nền (chứ không phải thẻ img), hoán đổi một hình ảnh ra sau hình ảnh khác bằng cách sử dụng công cụ chọn giả: hover.

Answer 3

Ok, hãy thử này:

Lấy hình ảnh với vòng tròn trong suốt - http://i39.tinypic.com/15s97vd.png Đặt hình ảnh trong một phần tử html và thay đổi màu nền của yếu tố mà qua css. Bằng cách này bạn sẽ nhận được logo với vòng tròn màu được xác định trong biểu định kiểu.

Các html

<div class="badassColorChangingLogo"> 
    <img src="http://i39.tinypic.com/15s97vd.png" /> 
    Or download the image and change the path to the downloaded image in your machine 
</div> 

Các css

div.badassColorChangingLogo{ 
    background-color:white; 
} 
div.badassColorChangingLogo:hover{ 
    background-color:blue; 
} 

Hãy ghi nhớ rằng công việc này wont trên phi-alpha trình duyệt có khả năng như IE6, và IE7. tức là bạn có thể sử dụng sửa chữa js. Google hỗ trợ sửa lỗi png và bạn có thể lấy tập lệnh.

Answer 4

Hơi muộn một chút nhưng tôi đã xem qua bài đăng này.

Nó không hoàn hảo nhưng đây là những gì tôi làm.

HTML Mã

<div class="showcase-menu-social"><img class="margin-left-20" src="images/graphics/facebook-50x50.png" alt="facebook-50x50" width="50" height="50" /><img class="margin-left-20" src="images/graphics/twitter-50x50.png" alt="twitter-50x50" width="50" height="50" /><img class="margin-left-20" src="images/graphics/youtube-50x50.png" alt="youtube-50x50" width="50" height="50" /></div> 

CSS Mã

.showcase-menu { 
    margin-left:20px; 
    margin-right:20px; 
    padding: 0px 20px 0px 20px; 
    background-color: #C37500; 
    behavior: url(/css/border-radius.htc); 
    border-radius: 20px; 
    } 

.showcase-menu-social img:hover { 
    background-color: #C37500; 
    opacity:0.7 !important; 
    filter:alpha(opacity=70) !important; /* For IE8 and earlier */ 
    box-shadow: 0 0 0px #000000 !important; 
} 

Bây giờ bán kính biên giới của tôi về 20px phù hợp chính xác với bán kính biên giới hình ảnh. Như bạn có thể thấy menu .showcase có cùng một nền với .showcase-menu-social. Điều này có nghĩa là để cho phép 'độ mờ' có hiệu lực và không có nền 'hình vuông' hoặc hiển thị đường viền, do đó hình ảnh hơi làm giảm độ bão hòa của nó khi di chuột.

Đó là một hiệu ứng tốt đẹp và cung cấp cho người xem phản hồi rằng hình ảnh đang được lấy nét. Tôi khá chắc chắn trên một nền tối hơn, nó sẽ có một hiệu ứng tốt hơn.

Điều thú vị là đây là mã HTML-CSS hợp lệ và sẽ xác thực. Thành thật mà nói, nó sẽ hoạt động trên các phần tử không phải hình ảnh tốt như hình ảnh.

Tận hưởng!

Answer 5

Sử dụng thuộc tính màu nền thay vì thuộc tính nền trong CSS của bạn. Vì vậy, mã của bạn sẽ trông như thế này:
.fb-icon:hover {
background: blue;
}

Answer 6

Một giải pháp thay thế sẽ được sử dụng các chức năng hình ảnh CSS mặt nạ mới mà làm việc trong tất cả mọi thứ ngoại trừ IE (vẫn không được hỗ trợ trong IE11). Điều này sẽ linh hoạt hơn và có thể duy trì hơn một số giải pháp khác được đề xuất ở đây. Bạn cũng có thể thường sử dụng SVG. ví dụ:

item { mask: url('/mask-image.png'); } 

Có một ví dụ của việc sử dụng một hình ảnh mặt nạ ở đây:

http://codepen.io/zerostyle/pen/tHimv 

và rất nhiều ví dụ ở đây:

http://codepen.io/yoksel/full/fsdbu/