Как изменить цвет png на зависании?

Я сделал «стрелку вниз» в иллюстраторе и сохранил его как png с прозрачным фоном. Когда я помещаю его на свою веб-страницу в качестве img, он отображается в исходном цвете, что хорошо. Я пытаюсь сделатьКак изменить цвет png на зависании?

img:hover{color:red;}

и он не работает.

Кто-нибудь знает, как заставить его работать?

Благодаря

источник

2015-02-24 pat

Если вы нацелены современные браузеры, вы можете использовать CSS filters.

hue-rotate фильтр подходит для изменения цвета:

filter: hue-rotate(180deg); 
-webkit-filter: hue-rotate(180deg);

Точное количество степеней зависит от вашего образа и ожидаемых результатов.

Обратите внимание, что фильтры CSS являются новой функцией и ее browser support is limited.

В качестве альтернативы, вы можете использовать CSS sprites технику, которая работает во всех браузерах разумного возраста.

источник

2015-02-24 22:21:40

Применение:

{color:red}

к любому элементу означает изменение цвета текста.

Try изменения:

img:hover {color:red}

к:

img:hover {background-image: url('<insert url to red arrow here>');}

и это работает, если у вас есть только одно изображение. Если у вас много изображений, и вы хотите, чтобы только один изменялся при наведении, установите ID для изображения, которое вы хотите изменить, и измените img и img: наведите на #x и #x: наведите указатель мыши и замените x на имя, которое вы указали для ID.

Вот пример (предположит, что другие HTML целы и отформатированы):

<style type="text/css"> 
#abc:hover {background-image: url('redarrow.png');} 
</style>  
<img ID="abc" src="normalarrow.png">

источник

2015-02-24 22:28:19

Что вам нужно сделать, это установить изображение в качестве фонового изображения с помощью CSS. Затем установите состояние зависания, используя другую версию изображения (с другим цветом). Например:

.element { 
    background-image: url(your-image.png); 
} 

.element:hover { 
    background-image: url(your-image-hover-version.png); 
}

В зависимости где вы кладете изображение/класс, вам необходимо назначить соответствующую высоту/ширину (или с помощью отступов).

источник

2015-02-24 22:31:21

Вы можете изменить цвет изображения с идентичным изображением другого цвета с событием (например, наведите указатель мыши).

HTML:

<div id="cf"> 
    <img class="bottom" src="/images/Windows%20Logo.jpg" /> 
    <img class="top" src="/images/Turtle.jpg" /> 
</div>

CSS:

#cf { 
     position:relative; 
     height:281px; 
     width:450px; 
     margin:0 auto; 
    } 

    #cf img { 
     position:absolute; 
     left:0; 
     -webkit-transition: opacity 1s ease-in-out; 
     -moz-transition: opacity 1s ease-in-out; 
     -o-transition: opacity 1s ease-in-out; 
     transition: opacity 1s ease-in-out; 
    } 

    #cf img.top:hover { 
     opacity:0; 
    }

Более подробно здесь: http://css3.bradshawenterprises.com/cfimg/

источник

2015-02-24 22:34:16

Как изменить цвет png на зависании?

ответ

Смежные вопросы