不透明度似乎工作时，只有它的值是1

嘿，我想尝试使用一些div元素的颜色选择器，我有一个问题，以了解不透明度。不透明度似乎工作时，只有它的值是1

这是我的HTML：

<form> 
    <label for="red">RED</label> 
    <input type="range" min="0" max="255" step="1" value="0" id="red" name="red" onchange="changeColors()"> 
    <label for="green">Green</label> 
    <input type="range" min="0" max="255" step="1" value="0" id="green" name="green" onchange="changeColors()"> 
    <label for="blue">Blue</label> 
    <input type="range" min="0" max="255" step="1" value="0" id="blue" name="blue" onchange="changeColors()"> 
    <label for="opacity">Alpha</label> 
    <input type="text" min="0" max="1" step="0.1" value="1" id="opacity" name="opacity" onchange="changeColors()"> 
</form> 
<div id="div"><div>

我当前的脚本：

function changeColors() { 
    //get the numbers from the html 
    var rd = parseInt(document.getElementById("red").value); 
    var gr = parseInt(document.getElementById("green").value); 
    var bl = parseInt(document.getElementById("blue").value); 
    var op = parseInt(document.getElementById("opacity").value); 

    //convert the decimal into hexadecimal 

    var rdhex = (rd < 16) ? "0" + rd.toString(16) : rd.toString(16); 
    var grhex = (gr < 16) ? "0" + gr.toString(16) : gr.toString(16); 
    var blhex = (bl < 16) ? "0" + bl.toString(16) : bl.toString(16); 

    //concatenate all hex to ger a color 
    var hexcode = "#" + rdhex + grhex + blhex; 

    //view the change in the browser 
    document.getElementById("div").style.backgroundColor = hexcode; 
    //change opacity 
    document.getElementById("div").style.opacity = op; 
}

的jsBin

正如你所看到的，只有当不透明度为 “1”，我可以看到任何结果。例如，当您尝试将值更改为0.5时，整个图像消失。

它有什么问题？

来源

2013-12-13 Henry Lynx

不透明度是一个十进制值，当它被检索时，你正在执行'parseInt'方法 – equisde

@ Henry：*“关于你编写的代码问题的问题必须描述具体问题 - 并且包含有效的代码来重现它 - **在问题本身**。请参阅http://SSCCE.org获取指导。“*与JSBin或jsFiddle之类的非现场活动网站的链接是一个很好的附件*，不是替代品。弗朗索瓦瓦尔很友善地将你的代码复制到你的问题中。 –

@ T.J.Crowder，我会有这个想法。谢谢你指出。 –

你解析为一个int这样“0.5”将全面为0

使用parseFloat代替：

parseFloat(document.getElementById("opacity").value);

来源

2013-12-13 10:25:12

是的，这是正确的，也只是一个侧面的信息，你可能想检查'rgba'而不是使用'opacity'属性。 –

当你改变不透明度为0.5，它被设置在实际的CSS是opacity: 0; 。

我想你想分析值作为一个浮点数。

来源

2013-12-13 10:26:01 AfromanJ

不透明度似乎工作时，只有它的值是1

回答

相关问题