web-dev-qa-db-ja.com

ホバーでpngの色を変更するにはどうすればよいですか？

イラストレーターで「下矢印」を作成し、背景が透明なpngとして保存しました。ウェブページにimgとして配置すると、元の色で表示されるので問題ありません。私がやろうとしている

  img:hover{color:red;}

そしてそれは動作しません。

誰かがそれを機能させる方法を知っていますか？

ありがとう

htmlcssiconspng
7
pat

最新のブラウザをターゲットにする場合は、 CSSフィルタ を使用できます。

hue-rotateフィルターは色の変更に適しています。

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

度の正確な量は、画像と期待される結果によって異なります。

CSSフィルターは新機能であり、その ブラウザーのサポートは制限されています です。

あるいは、 CSSスプライト 技術を使用することもできます。これは、妥当な年齢のすべてのブラウザーで機能します。

6
Alex Shesterov

CSSを使用して、画像を背景画像として設定する必要があります。次に、イメージの別のバージョン（異なる色）を使用してホバー状態を設定します。例えば：

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

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

画像/クラスを配置する場所に応じて、適切な高さ/幅を割り当てる（またはパディングを使用する）必要があります。

2
Richard Blyth

イベント（ホバーなど）を使用して、画像の色を別の色の同じ画像に変更できます。

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/

1
Kirk Powell

また、次のような簡単な方法についても考えていました。

.img:hover {
      background: red;
}

または

.img:hover {
      color: red;
}

しかし、簡単なクロスブラウザサポートソリューションは見つかりませんでした。ただし、一部のブラウザーソリューションは、CSSで簡単に設定できるfill属性を持つSVG画像を使用していることがわかりました。

ただし、font-awesome（基本的には、文字の代わりに異なるアイコンを使用するフォント）を使用する場合、のように、単純なCSS属性colorで簡単に制御できます。二番目の例

したがって、最も簡単なソリューションが必要な場合は、使用するイメージに対応するプロジェクトのSVGイメージを見つけてください。私はこのプロセスに少し苦痛を感じ、pngと.jpgと.pngを.svgに変換する方法を学ぶことにしました。そのために役立つコマンドラインツールがあり、それは potrace と呼ばれます。このツールを使用することを決定した場合、私が注目することの1つは、単純なエディターを使用して、pathに変換したいすべてのものをdark対比することです。特定の.svgおよび白/光（透明ではない）の色と、.svgファイルで表示したくない領域の色。

1
kovalyovi

申請中：

{color:red}

任意の要素に対しては、テキストの色を変更することを意味します。

変更してみてください：

img:hover {color:red}

に：

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

これは、画像が1つしかない場合に機能します。画像が多く、ホバー時に1つだけ変更したい場合は、変更する画像のIDを設定し、imgおよびimg：hoverを#xおよび#x：hoverに変更し、xを指定した名前に置き換えますID。

以下に例を示します（他のHTMLは変更されておらず、適切にフォーマットされていると想定しています）。

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