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

Posted

技术标签:

【中文标题】是否可以让 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 这样的库。

【讨论】:

以上是关于是否可以让 HTML5 颜色输入值透明?的主要内容,如果未能解决你的问题,请参考以下文章

如何知道 HTML5 输入类型颜色是不是可用作颜色选择器?

是否可以根据其他表单的输入来更改 HTML5 范围滑块的最小值和最大值?

使用 CSS 更改 HTML5 输入的占位符颜色

Angular.js 和 HTML5 日期输入值——如何让 Firefox 在日期输入中显示可读的日期值?

我可以将默认输入颜色选择器类型设置为检查网格/透明吗?

【HTML5】增强型表单标签