R、G、Bのスライドバーで色を変えたい

解決済

質問者：cacugun-g
質問日時：2017/07/11 09:39
回答数：1件

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>

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

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

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

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

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

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

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

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

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (1件)

ベストアンサー優先
最新から表示
回答順に表示

No.1ベストアンサー

回答者： fujillin
回答日時：2017/07/12 09:45

こんにちは

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

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