使用Javascript根据父级的背景色设置子级的不透明度值

问题描述

我试图粗略地模拟将要打印在选定背景颜色上的东西的样子。我正在尝试通过设置父级的背景并将不透明度应用于子级来实现这一目标。

例如：

如果选择的背景色为rgb（0，0，0），则将孩子的不透明度设置为70％（最低）
如果选择的背景色为rgb（255，255，255），则将孩子的不透明度设置为100％（最高）
如果选择的背景色为rgb（127，127，128），则将孩子的不透明度设置为85％（中间）
如果选择的背景色为rgb（0，127，255），则将孩子的不透明度设置为85％（中间）

请参见下面的图片，了解我想要实现的目标。

我的想法是将rgb值加在一起，使总和0 = 70％，总和765 = 100％，并且介于两者之间。

（0 + 0 + 0）/ 100 = 0
（255 + 255 + 255）/ 100 = 765

这是我的代码，可从html5输入中动态选择一种颜色[type ='color']，不幸的是，对于不透明度设置，我什么也没显示...

<script>
   var color = document.querySelector(".color");
   var bg = document.getElementById("bg");

   function setBackground(){
      bg.style.background = color.value;
   };

   color.addEventListener("input",setBackground);
</script>


<div id="bg">
   <input type="color" class="color" value="#ffffff">                  
</div>

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

dynamically-generated html javascript