根据 Parent 的 background-color 和 Javascript 设置 Child 的不透明度值

Question

我正在尝试粗略地模拟如果将某物打印在选定的背景颜色上会是什么样子。我试图通过设置 parent 的背景并对 child.

应用不透明度来实现这一点

例如：

如果选择 background-color 是 rgb(0, 0, 0)，将 Child 的不透明度设置为 70%（最低）
如果选择 background-color 是 rgb(255, 255, 255)，将 Child 的不透明度设置为 100%（最高）
如果选择 background-color 是 rgb(127, 127, 128) 将 Child 的不透明度设置为 85%（中）
如果选择 background-color 是 rgb(0, 127, 255) 将 Child 的不透明度设置为 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>

Answer 1

您可以执行如下所示的操作。我在下面实现的想法是与背景的亮度有关。根据背景的亮度，您可以修改CSS以达到您的要求。

我使用了两个文本 - 一个改变颜色，另一个改变不透明度。我为代码使用了绿色文本（不透明度）。您可以对您的图片进行同样的尝试。

参考 link - http://alienryderflex.com/hsp.html

let color = document.querySelector(".color"),
  bg = document.getElementById("bg"),
  text = document.getElementById("text"),
  text2 = document.getElementById("text2");
color.addEventListener("input", function(evt) {
  bg.style.background = color.value;
  let oColor = evt.srcElement.value,
    result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(oColor),
    rgb = result ? {
      r: parseInt(result[1], 16),
      g: parseInt(result[2], 16),
      b: parseInt(result[3], 16)
    } : null;
  if (!rgb) {
    return "";
  }
  let hsp = Math.sqrt(0.299 * (rgb.r * rgb.r) + 0.587 * (rgb.g * rgb.g) + 0.114 * (rgb.b * rgb.b));
  let textColor = hsp > 127.5 ? "black" : "white";
  text.style.color = textColor;
  let opacity = hsp * 0.3 / 255 + 0.7;
  text2.style.opacity = opacity;
});

<html>

<body id="bg">
  <div>
    <h1 id="text">Hello</h1>
    <h1 id="text2" style="color:green;">World</h1>
    <input type="color" class="color" value="#ffffff" />
  </div>
</body>

</html>

Edit1 - 插入 hsp 映射公式 - 0-255 范围到 0.7-1 范围以计算不透明度。

根据 Parent 的 background-color 和 Javascript 设置 Child 的不透明度值

Set the Child's opacity value depending on the Parent's background-color with Javascript

javascript

html

css

dynamically-generated