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

Question

在我的 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 增强输入类型颜色元素 模式属性功能。

Answer 1

基于 @Abdelaziz Mokhnache 的 answer

您还可以使用纯 JavaScript 创建自己的简单颜色输入，而无需从外部加载，如下所示：

let color_picker=document.querySelector("#color_picker");
let color_wrapper=document.querySelector("#color_wrapper");
let color_picker_alpha=document.querySelector("#color_picker_alpha");

function set_color(el){
    color_wrapper.style.backgroundColor=color_picker.value + (color_picker_alpha.value == 255 ? "" : parseInt(color_picker_alpha.value).toString(16).padStart(2, "0"));
}

#color_wrapper {
  background-color: black;
  display: inline-block;
  visibility: hidden;
}

#color_wrapper::before {
  content: "";
  position: absolute;
  border-radius: 3px;
  outline: black solid 2px;
  border: white solid 3px;
  height: 2rem;
  width: 2rem;
  pointer-events: none;
  background-color: inherit;
  visibility: visible;
  box-sizing: border-box;
}

#color_picker {
  opacity: 0;
  height: 2rem;
  width: 2rem;
  box-sizing: border-box;
  pointer-events: initial;
  visibility: visible;
}


#color_picker_alpha {
  filter: grayscale(100%);
  visibility: visible;
}

<div id=color_wrapper>
  <input id="color_picker" oninput="set_color(this)" type="color" data-color="black">
  <input id="color_picker_alpha" oninput="set_color(this)" type="range" min="0" max="255" step="1" value="255" />
</div>

Answer 2

你可以使用 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>

Answer 3

在CSS4中有8位RGB十六进制表示法：#RRGGBBAA。 最后两位数字是 Alpha 通道的值。

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

目前不确定浏览器支持情况。

Answer 4

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

Answer 5

这样使用，

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

参考这个，

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

Answer 6

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

Answer 7

最后 2 位数字改变透明度

#ffffff00

=> 最小颜色不透明度

#ffffff83

#ffffffff

=> 最大颜色不透明度

编辑：正如Lazerbeak12345所说，输入[type=color] alpha通道已被请求，但尚未取得进展。

Answer 8

我通过添加“e6”解决了这个问题，

 $('#color').change(function(e){
    $('.mask').css('background-color', e.target.value+'e6')
    console.log(e.target.value+'e6')
})

尝试使用浏览器控制台并转到元素，找到目标元素并在那里选择一种颜色，颜色中的最后 2 个字符是 alpha...只是根据我的经验

Answer 9

我建议另一种方式：可能更方便 就我而言，我输入颜色和 alpha 并将它们保存在 json 文件中，以便在加载页面时调用它读取 json 文件以获取保存的设置 用于更改设置的编辑表单使用

substr()

拆分保存的颜色+alpha，然后使用

hexdec()

转换为 dec 在表单之前（php）：

$value =  JData['Page];
$galHighlightColor = substr($value['galHighlightColor'], 0, 7);
$galBorderColor = substr($value['galBorderColor'], 0, 7);
$Ha = hexdec(substr($value['galHighlightColor'], 7, 2));
$Ba = hexdec(substr($value['galBorderColor'], 7,2));

然后以表格形式（只需为每个做）（php）：

echo "
<td class=\" w3-col s3\" > 
  <input   type=\"color\" name=\"galBorderColor\" value= \"".$galBorderColor."\" ></input>                  
</td>
<td class \"tooltip\">
  Alpha<input type=\"range\" value = \"$Ba\" step = \"1\" class  =  \"coordsInput\"  id = \"Ba\" name=\"Ba\" placeholder = \"alha\" size=\"3\" maxlength = \"3\" min=\"0\" max=\"255\"></input>
  <span class=\"tooltiptext tt-right\">  Apha 0-255 for this color </span>
</td> 
";

处理表单，保存每个获取颜色的完整8位颜色代码，并再次将十进制转换为十六进制，但使用

dechex()

现在你得到了一个颜色+alpha，你可以在我的示例中使用，我将其保存在一个json文件中（ php）：

<?php
$JData['Page']['galBorderColor'] = $_POST['galBorderColor'].dechex($_POST['Ba']) ;
?>

Json 文件入口：

"galHighlightColor":"#e63333c0","galBorderColor":"#d6a8a8ff"

用于 html (php):

<?php
$galHighlightColor = $value['galHighlightColor'];
$galborderColor = $value['galBorderColor'];

echo"
<div style=\"background-color:$galHighlightColor; border-color: $galborderColor;\">
</div>
";
 ?>

“字体”颜色、背景颜色、边框颜色。

Answer 10

试试这个

opacity: 0.5;

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