Question

嘿我正在尝试使用一些div元素制作颜色选择器，并且我在理解不透明度方面遇到了问题。

这是我的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时，整个图像将消失。

它出了什么问题？

Answer 1

您正在解析为int，因此“0.5”将舍入为0。

改为使用parseFloat：

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

Answer 2

当您将不透明度更改为0.5时，实际设置的CSS为opacity: 0;。

我认为您希望将值解析为float。

仅当其值为1时，不透明度似乎有效

2 个答案: