是否可以让 HTML5 颜色输入值透明？

Posted 2023-03-06

【中文标题】是否可以让 HTML5 颜色输入值透明？

【英文标题】：Is it possible to have HTML5 color input value transparent?

【发布时间】：2015-10-19 20:11:49

【问题描述】：

输入除 HEX (#ffffff) 以外的任何值都会导致控制台错误。但我想知道用户是否不想要颜色和透明。

我知道下面的语法无论如何都行不通。但是有没有什么办法可以实现透明的价值。

<input type='color' value='transparent'/>

【问题讨论】：

w3.org/TR/html5/…

这里还有其他讨论：github.com/w3c/html/issues/1422

【参考方案1】：

<div style="background-color:rgba(0, 0, 0, 0.5);">
   <div>
      Text added.
   </div>
</div>

目前没有对 HTML5 的直接透明背景支持。我会建议 CSS

链接：CSS Background Opacity

【讨论】：

你没有回答问题。

【参考方案2】：

我认为目前无法使用原生 HTML 颜色输入设置透明值：

注意：将该值设置为任何无效的、完全不透明的十六进制 RGB 颜色将导致该值设置为 #000000。特别是，您不能使用 CSS 的标准化颜色名称或任何 CSS 函数语法来设置值。

当您记住 HTML 和 CSS 是不同的语言和规范时，这是有道理的。此外，不支持带有 Alpha 通道的颜色；以 9 个字符的十六进制表示法（例如 #009900aa）指定颜色也会导致颜色设置为 #000000。

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/color#value

一个潜在的解决方案可能是使用像 Pickr.js 这样的库。