Как изменить цвет изображения при зависании

Question

Мне нужно изменить цвет фона изображения. Изображение представляет собой изображение круга с белым фоном, мне нужно, когда вы наводите на него курсор, меняют фон круга на синий. Мне нужен только круг, который нужно изменить.

Мой HTML код

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

В CSS я написал:

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

Приведенный выше код дает мне синий цвет, но в виде рамки вокруг значка круга. мне нужно изменить фон самого круга. Представьте, что это похоже на сигнал, когда он наводится на мышь, и он становится синим.

Пожалуйста, мне нужно решение, если это можно сделать с помощью CSS или любого другого. Извините, если я сделаю это слишком долго.

Проблема: link

Answer 1

В идеале вы должны использовать прозрачный PNG с кругом в белом цвете и на фоне прозрачного изображения. Затем вы можете установить background-color из .fb-icon в синий цвет при наведении. Таким образом, вы CSS будет:

fb-icon{ 
    background:none; 
} 

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

Кроме того, если вы не хотите использовать PNG вы также можете использовать спрайт и изменить положение фона. Спрайт - это одно крупное изображение с коллекцией меньших изображений, которое можно использовать в качестве фонового изображения, изменяя положение фона. Так, например, если ваше исходное изображение круга с белым фоном - 100px X 100px, вы можете увеличить высоту изображения до 100px X 200px, так что верхняя половина - это исходное изображение с белым фоном, в то время как нижняя половина - это новое изображение с синим фоном. Затем вы устанавливаете настройку ваш CSS как:

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

Если я правильно понимаю, то это было бы проще, если бы вы дали ваше изображение с прозрачным фоном и установить цвет фона свойство фон контейнера без необходимости использовать фильтры и так далее.

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

показывает, как использовать фильтры в IE. Может быть, если вы что-то извлечете из этого. Не очень совместимо с несколькими браузерами. Другой вариант может состоять в том, чтобы иметь два изображения и использовать их в качестве фоновых изображений (а не img-тегов), обменивать их один за другим, используя псевдо-селектор: hover.

Answer 3

Ok, попробуйте следующее:

Получить изображение с прозрачным кругом - http://i39.tinypic.com/15s97vd.png поместить это изображение в HTML элемента и изменить цвет фона этого элемента с помощью CSS. Таким образом вы получите логотип с кругом в цвете, определенном в таблице стилей.

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> 

устанавливаемыми сотовыми

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

Имейте в виду, что это не будет работать на не-альфа, способных браузеров, таких как IE6 и IE7. например, вы можете использовать js fix. Google ddbelated png исправить, и вы можете получить скрипт.

Answer 4

Немного поздно, но я столкнулся с этим сообщением.

Это не идеально, но вот что я делаю.

HTML код

<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 код

.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; 
} 

Теперь моя граница радиус 20px совпадает точно с радиусом границы изображения. Поскольку вы можете видеть, что .showcase-меню имеет тот же фон, что и .showcase-menu-social. Это делается для того, чтобы позволить «непрозрачность» вступить в силу, а не «квадратные» фон или границы, поэтому изображение слегка уменьшает насыщенность при наведении.

Это хороший эффект и дает зрителю обратную связь, что изображение находится в фокусе. Я уверен, что на более темном фоне это будет иметь даже лучший эффект.

Приятно, что это допустимый код HTML-CSS и будет проверяться. Честно говоря, он должен работать над элементами без изображения так же хорошо, как изображения.

Наслаждайтесь!

Answer 5

Используйте свойство background-color вместо свойства background в вашем CSS. Так что ваш код будет выглядеть следующим образом:
.fb-icon:hover {
background: blue;
}

Answer 6

Альтернативным решением будет использовать новый CSS маски функциональность изображения, которая работает во всем, кроме IE (до сих пор не поддерживается в IE11). Это было бы более универсальным и поддерживаемым, чем некоторые другие предлагаемые здесь решения. Вы также можете использовать SVG более широко. , например.

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

Существует пример использования маски изображения здесь:

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

и много примеров здесь:

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