Question

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

例如：

如果选择的背景色为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>

Answer 1

您可以执行以下操作。我下面实现的想法与背景的亮度有关。根据背景的亮度，可以修改CSS以满足您的要求。

我使用了两种文本-一种改变颜色，另一种改变不透明度。我使用绿色文本表示代码（不透明）。您可以对图像尝试相同的操作。

参考链接-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范围以计算不透明度。

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

1 个答案: