如何从 CSS 中的 HTML 输入类型颜色字段中为值添加透明度？答案

【问题标题】：How to add transparency to a value from a HTML input type color field in CSS?如何从 CSS 中的 HTML 输入类型颜色字段中为值添加透明度？
【发布时间】：2017-03-09 20:56:09
【问题描述】：

在我的 CSS 中，我需要一种基于用户选择颜色的颜色。选择的颜色使用 80% 的固定透明度。

以下表单元素将让用户轻松选择颜色。

<input type=color value=#00ffff> // #00ffff

但是如何在 CSS 中为其添加透明度呢？

rgba(#00ffff,.8) // doesn't work

更新：我特意问了怎么用 CSS 做，而不是用 JS。顺便说一句，它适用于 PHP 驱动的 CMS。我不想把 JS 强加给用户，我也不想用 PHP 写转换函数。

可能我必须等待 CSS4（类似 SASS/LESS）颜色函数，或者使用 hsla/rgba 增强输入类型颜色元素模式属性功能。

【问题讨论】：

因此，您希望用户选择一种颜色，然后以 0.8 的不透明度将其应用于某物。可以正常使用颜色，然后添加 opacity:0.8;或者将十六进制颜色转换为 3 种十进制颜色并使用 rgba。
您希望用户看到颜色的透明度吗？
这里有几个答案convert-hex-to-rgba
这不是你做 rgba 或 rgb 的方式，你的 rgba 中有一个十六进制代码。 background-color:rgba(192,192,192,0.3); - 那是 rgba - w3schools.com/csSref/css_colors_legal.asp
RGB to Hex and Hex to RGB可能重复，首先需要将十六进制值转换为rgba

标签： html css input transparency

【解决方案1】：

你可以用最后2位改变透明度

<input type=color value=#ffffff00> // color opacity = 0%
<input type=color value=#ffffff80> // color opacity = 80%

【讨论】：

【解决方案2】：

function rgbA(color) {    
    rgba=color.substring(0,7)+$('#AlphaFill')[0].value.padStart(2,'0').replace(100,'');
    return rgba;
}

插入输入类型="范围"。将您的 6 位十六进制发送到上述函数。 rgbA('#ff0000')

<input id="AlphaFill" class="range1" type="range" min="0" max="100" step="10" value="100" />

以十六进制返回 8 位 rgba：范围 80 = #ff000080 或范围：0 = #ff000000 或范围：100 = #ff0000

【讨论】：

【解决方案3】：

如果你想用这个颜色但只知道HEX类型，试试用颜色选择工具把它转换成RGB或HSL，网上有很多。然后只需添加 alpha chanel ( 0 -1) 以获得透明度。例如。 RGB(225,10,10, 0.7) 用这个： https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Colors/Color_picker_tool

【讨论】：

【解决方案4】：

在 CSS4 中有 8 digits RGB hexadecimal 符号：#RRGGBBAA。最后一位是 Alpha 通道的值。

这使得将 alpha 值轻松连接到十六进制字符串变得容易。

目前不确定浏览器是否支持。

【讨论】：

【解决方案5】：

你可以使用 jquery 来做这样的事情，你可以将具有自定义透明度的自定义颜色应用于元素。

$(document).ready(function() {

  $("input").change(function() {

    var opacity = $("input[type=range]").val();
    var color = $("input[type=color]").val();

    var rgbaCol = 'rgba(' + parseInt(color.slice(-6, -4), 16) + ',' + parseInt(color.slice(-4, -2), 16) + ',' + parseInt(color.slice(-2), 16) + ',' + opacity + ')';

    $('div').css('background-color', rgbaCol)
  })
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<input type=color value=#00ffff>
<!-- color -->
<input type="range" min="0" max="1" step="0.1">
<!-- transparency -->

<div>this is a div</div>

【讨论】：

为什么选择 Jquery？如果您可以使用该平台，则无需加载库。
你的意思是stackoverflow默认支持jquery？我不太了解你@AndrewBone
Thx，这是一个不错的 JS 解决方案，我猜@Andrew 想知道为什么您将 jQuery 设为依赖项而不使用普通 JS。

【解决方案6】：

这样使用，

background-color : rgba(0, 255, 255, 0.8);

参考这个，

http://www.wufoo.com/html5/types/6-color.html

【讨论】：

是否可以在 value="#ff00ff" 中使用 rgba 值？
<input type="color" value="rgba(255, 5, 5, 0.5)"> 显然不是。
如果用户在输入中输入#000 会怎样？
MDN page 是正确的：“颜色类型的元素的值始终是一个 DOMString，其中包含一个 7 字符的字符串，以十六进制格式指定 RGB 颜色。虽然您可以输入大写或小写的颜色，它将以小写形式存储。该值永远不会以任何其他形式存在，并且永远不会为空。始终是 6 位值，绝不是 rgba 或 3 位或 8 位 (rrggbbaa)。

【解决方案7】：

试试这个

opacity: 0.5;

这将显示用户选择的透明颜色。

【讨论】：

这使整个元素透明。不是颜色。