PNG画像の中心部が、透過情報ありになっている
国旗のような画像の中心部が、
ホームページ上で、R、G、Bのスライドバーを使い、作った色で塗りつぶしたいのですが、どのようにしたらいいでしょうか?
パソコン初心者で、無料のホームぺージのテンプレートで作りたいです。
(画像参照)

デザイン等はシンプルなものでかまいません。
どのようにしたらいいでしょうか。

現状は、

<head>
<script>
function clickNow(){

var r = document.querySelector('#red').value;
var g = document.querySelector('#green').value;
var b = document.querySelector('#blue').value;
var msg = document.querySelector('#msg');
msg.style.backgroundColor = 'rgb(' + r + ',' + g + ',' + b + ')';
}
</script>
</head>


<body>
<div id="msg" style="display: inline-block;"><img src="画像"></div>
<p>
<input type="range" id="red" max="255"><br>
<input type="range" id="green" max="255"><br>
<input type="range" id="blue" max="255"><br>
</p>
<button onclick="clickNow();">Click</button>
</body>

となっていますが、色が変わりません。

画像はワード確認しましたが、
背景が透けますので、透過情報はついています。

何か他にも問題があるのでしょうか?

「R、G、Bのスライドバーで色を変えたい」の質問画像

質問者からの補足コメント

  • うーん・・・

    ご回答ありがとうございました。
    取敢えずは間違えはないようですね。

    ただ、忍者HPの無料版でやってみたのですが、動作しませんでした。


     >念のため、#msg要素に画像よりも大きなサイズを与えておいて、背景が変わるかどうかを確認なさってみてはいかがでしょうか?
    (スクリプトがOFFになっていたり、あるいは、サーバで使用禁止になっていたりということはありませんよね?)


    どういうことか良くわかりませんでした。
    申し訳ありませんが、
    もう少し分かりやすく教えていただけないでしょうか。

    No.1の回答に寄せられた補足コメントです。 補足日時:2017/07/13 17:41

A 回答 (1件)

こんにちは



ほぼそのままコピペで試してみましたが、動作するようです。
(IE11.0、fx54.0)

念のため、#msg要素に画像よりも大きなサイズを与えておいて、背景が変わるかどうかを確認なさってみてはいかがでしょうか?
(スクリプトがOFFになっていたり、あるいは、サーバで使用禁止になっていたりということはありませんよね?)
この回答への補足あり
    • good
    • 0
この回答へのお礼

fujillinさん
何度かやってみましたら、
できていたようです。

お手数かけましたが、ありがとうございました。

お礼日時:2017/07/13 18:18

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人はこんなQ&Aも見ています


このQ&Aを見た人がよく見るQ&A

人気Q&Aランキング

おすすめ情報