html输入类型=“颜色”中的透明度

Question

<input type="color" />

一个简单的问题，我看到这个简单的颜色选择器只有 3 个版本 rgb, hex, hsl 但是即使在检查元素中有这样一个选项，在哪里也可以选择透明度

那我该怎么办？我什至尝试在开头使用 00 设置十六进制的默认值，例如将 #ffffff 更改为 #00ffffff 使其成为透明的白色，但它只是白色

如何让<inptue type="color" />拥有透明工具？？

Answer 1

我似乎找不到一个默认的带有颜色的 HTML 输入，它也使用透明度，但是查看 Alex 发送的链接，使用辅助滑块输入似乎是用户输入的最简单方法。这是一个滑块，其幻灯片背景与颜色输入中的任何颜色相匹配，并且滑块输出一个介于 0 和 1 之间的值。

var slider = document.getElementById("slider"), color = document.getElementById("color");
color.oninput = function() {
    slider.style.backgroundImage = "linear-gradient(to right,rgba(0,0,0,0),"+color.value+")";
    let rgb = hexToRgb(color.value);
    document.getElementById("test").style.backgroundColor = "rgba("+rgb.r+","+rgb.g+","+rgb.b+","+slider.value+")";
}
slider.oninput = function() {
    let rgb = hexToRgb(color.value);
    document.getElementById("test").style.backgroundColor = "rgba("+rgb.r+","+rgb.g+","+rgb.b+","+slider.value+")";
}
function hexToRgb(hex) {
  var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
  return result ? {
    r: parseInt(result[1], 16),
    g: parseInt(result[2], 16),
    b: parseInt(result[3], 16)
  } : null;
}

.slider {
  -webkit-appearance: none;
  width: 100%;
  height: 25px;
  background-image: linear-gradient(to right,rgba(0,0,0,0),#00ffff);
  outline: none;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 10px;
  height: 30px;
  background: #4CAF50;
  cursor: pointer;
}

<input type=color value=#00ffff id="color">
<input type="range" min="0" max="1" value="1" step="0.01" class="slider" id="slider">
<div id="test" style="width: 100px;height: 100px;"></div>