Question

是否可以使用内置

选择透明色

<input type="color">

我还没有找到一个滑块来做到这一点。我需要检查一些其他选项吗？

Answer 1

AFAIK没有使用<input type="color">进行透明颜色选择的选项，但您可以做的是为alpha设置另一个输入，并设置颜色输入的不透明度，如下所示：

＆＃13;

function updateColorAlpha (alpha) {
    document.getElementById('color').style.opacity = alpha;
}

＆＃13;

<input type="color" id="color">
<input type="range" id="alpha" onchange="updateColorAlpha(this.value);" min="0" max="1" step="0.1" value="1">

＆＃13;

Answer 2

我不认为这可能是原生的。颜色选择器只返回十六进制代码，无法表示透明度。您需要构建一些定制的东西（或者有一个颜色选择器和一个透明度的东西，并且自己在幕后进行计算）。

有关详细信息，请参阅：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/color#Value

Answer 3

您可以使用<input type=range>和<input type=color>来实现您的目的。没有HTML “直接”方式来实现它。

<input type="color" oninput = "setColor()" id = "color">
<br />
<input type="range" min="0" max="1" step = "0.1" onchange = "setColor()" id = "opacity" value = "1">
<div id = "result" style = "height:50px; width:50px;">
</div>

<script>
    function setColor() {
        var color = document.getElementById('color').value;
        var opacity = document.getElementById('opacity').value;
        document.getElementById('result').style.background = color;
        document.getElementById('result').style.opacity = opacity;
    }
    setColor();
</script>

您可以通过Javascript从输入类型范围获取所需不透明度的值，然后在结果元素上设置颜色和不透明度（在这种情况下为div）

请注意，如果您需要更多“可自定义”解决方案，可以在Picker.js

尝试jQuery插件

透明的颜色输入

3 个答案: