ここから本文です

WEBのHTML javaなどで、画像の特定の1色を別のカラーに変更して表示することが可能...

アバター

ID非公開さん

2017/12/2720:50:23

WEBのHTML javaなどで、画像の特定の1色を別のカラーに変更して表示することが可能でしょうか?

透過PNGイラスト画像をIMGタグで設置しています。
imgタグの下の要素(div)のbackground-colorで背景色を変更することで
その画像のカラーをカスタマイズできるみたいなものを作っています。

さらにその下に背景として画像がもう一枚有りその画像も切り替えれるようにしています。
つまり3層構造です。

その画像は、中央にイラストがあり、イラスト部分を透過すると
周りにもbackground-colorが表示されて四角い枠のようになってしまいます。

そこで、透過はイラストの周りだけにして、イラスト自体のある1色を変更できるようなことが
できればと考えています。

補足ご回答ありがとうございます。
ややこしくてすみません。自分でもちゃんと質問できるか不安でした。
https://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q111839150...
新たに質問つくりました。宜しくお願いします。

イラスト,HTML java,imgタグ,svg&gt,背景色,透過PNGイラスト画像,img&gt

閲覧数:
39
回答数:
1
お礼:
500枚

違反報告

ベストアンサーに選ばれた回答

oishii_mahouさん

2017/12/2808:05:34

CSS の filter を使えば、
画像全体に色フィルターを掛けること可能だが、
1つのオブジェクトとして配置された画像に対して、
その画像の中の1色だけ指定して別の色に変えるっていうのは、
HTML や CSS、Javascript などのコーディングだけでは無理だと思う。

SVG 形式の画像を、
HTML の中に <svg> タグでコードとして埋め込めば、
その SVG 画像内のパーツ単位で色を変えることは出来るかも知れない。
ただ、
たとえば数個の●▲■を組み合わせただけのようなイラストなら、
<svg> での操作もそれほど大変ではないと思うけど、
複雑な輪郭線が多数あるような画像だと、
<svg> でのコントロールはかなり大変なことになりそう。

※<svg> のタグ操作については、
自分はまだ入門程度しか分かってないんで、
実際どこまで出来るのかは解説ができない・・・

画像を分割して、
その重ね合わせで対処できるなら、
それがいちばん簡単だと思う。



質問の内容がいまいち理解できんのだが、
まず、
重なっているモノは、手前から背面に向かって
(1)<img> 半透明のイラスト画像
(2)<img> 背景用の画像
(3)<div> 背景色用
の3枚っていうことだろうか。
この辺が質問の内容だとさっぱり分からん。

質問添付の画像についてだが、
ピンクの部分が(1)の半透明なイラスト画像で、
その背面に透過して、中央の■が透けて見えている状態、っていうことか?
それで、
ピンクの●に外接している方の青い■も(2)の一部で、そこは不透明、
っていうことだろうか。

質問文と添付画像を何度も見返したが分からんかったんで、
返信あたりで、
そのあたりもう少し分かりやすく説明してもらえたら、
解決策が分かる・・・・かもしれない。

アバター

質問した人からのコメント

2017/12/28 10:52:36

回答ありがとうございます。別の質問で再投稿いたしました。
宜しくお願いします。

みんなで作る知恵袋 悩みや疑問、なんでも気軽にきいちゃおう!

Q&Aをキーワードで検索:

Yahoo! JAPANは、回答に記載された内容の信ぴょう性、正確性を保証しておりません。
お客様自身の責任と判断で、ご利用ください。
本文はここまでです このページの先頭へ

「追加する」ボタンを押してください。

閉じる

※知恵コレクションに追加された質問は選択されたID/ニックネームのMy知恵袋で確認できます。

不適切な投稿でないことを報告しました。

閉じる