2

画像の色を変更したいサイトがあります。
次のような単純なpngがあります。

<img src="arrow.png" alt="" id="arrow" />

ここに画像の説明を入力

必要に応じて、内側の色を変更したり、別の色に変更したりします。

このモードで試してみましたが、SVG では動作せず、画像の色が変わりません

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <image style=fill:#000000"  xlink:href="arrow.png" />  
</svg>

PHP、JavaScript、または jQuery で解決策が必要です。PHP で GD ライブラリを見たことがありますが、画像のような ID を持つ既存の要素に色の変更を適用したいと考えています。

これを解決する方法は？

4

4 に答える 4

1

フォトショップで黒い部分を切り取って透明にするだけで、次のように画像に背景を適用できます。

<img style="background: red;" src="arrow.png">

すべてのブラウザで動作します。

于 2013-05-23T15:03:22.030 に答える
1

他の人が示唆しているように、SVGを使用することもできます

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <path id="arrow" fill="#000000" d="m1,65 h172 l-64,-64 h50 l82,82 -82,82 h-50 l64,-64 h-172z"/>
</svg>

ID を持つ要素を選択し、塗りつぶしを変更できます (または、style="fill:#000000" を使用します)。

于 2013-05-23T16:56:40.517 に答える
1

この質問はCSS3でタグ付けされていませんでしたが、役立つと思う人、または単色、他の画像、または[この例のように]画像を「マスク」するために使用できることを単に知らない人-mask-box-image向けbackgroundです示す] とgradients。プログラムによるアクセシビリティを考えると、必要に応じて最小限のスクリプトでオンザフライで変更できます。

マークアップ

<div class="arrow"></div>

CSS

.arrow {
     width: 250px;
     height: 250px;
     -webkit-mask-box-image: url('http://i.stack.imgur.com/1jkhG.png');
     background: -webkit-gradient(linear, 38% 0%, 60% 70%, from(#dde9f0), to(#3fc5f8), color-stop(.6,#79b2ec),color-stop(.7,#2e91e5));
}

結果

結果

プランク

http://plnkr.co/edit/717iDTzblDQfFSkaT2N6?p=preview

明らかに、ベンダー プレフィックスとサポートされている環境に注意することが重要です。

于 2013-05-23T14:59:24.550 に答える