如何解决使用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>
解决方法
您可以执行以下操作。我下面实现的想法与背景的亮度有关。根据背景的亮度，可以修改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],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范围以计算不透明度。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。