【发布时间】:2014-06-05 17:43:11
【问题描述】:
【问题讨论】:
-
终于有一种方法可以用十六进制代码为某些浏览器设置透明颜色(新功能)。请看stackoverflow.com/a/60876347/2457251
【问题讨论】:
这里是 % 到十六进制值的表格:
示例:对于 85% 的白色,您可以使用 #D9FFFFFF。
这里 85% = "D9" & 白色 = "FFFFFF"
100% — FF
95% — F2
90% — E6
85% — D9
80% — CC
75% — BF
70% — B3
65% — A6
60% — 99
55% — 8C
50% — 80
45% — 73
40% — 66
35% — 59
30% — 4D
25% — 40
20% — 33
15% — 26
10% — 1A
5% — 0D
0% — 00
如何计算?
FF 是以十六进制模式写入的数字。该数字以十进制表示 255。例如,如果要计算 42%,则需要找到数字 255 的 42% 并将该数字转换为十六进制。 255 * 0.42 ~= 107 107 到十六进制是“6B – 马来人
【讨论】:
透明度由 Alpha 通道控制(AA in #AARRGGBB)。最大值(255 dec,FF hex)表示完全不透明。最小值(0 dec,00 hex)表示完全透明。两者之间的值是半透明的,即颜色与背景颜色混合。
要获得完全透明的颜色,请将 alpha 设置为零。 RR、GG 和 BB 在这种情况下无关紧要,因为看不到颜色。这意味着#00FFFFFF(“透明白色”)与#00F0F8FF(“透明AliceBlue”)颜色相同。
为简单起见,如果颜色无关紧要,可以选择黑色 (#00000000) 或白色 (#00FFFFFF)。
在您链接到的表中,您会发现 Transparent 定义为 #00FFFFFF。
【讨论】:
7F。将您的计算器置于十六进制模式,它会为您解决问题。
#7FFFFFFF。
添加到其他答案,并没有做更多 @Maleta 在 https://stackoverflow.com/a/28481374/1626594 的评论中解释的内容,先做 alpha*255 然后四舍五入到十六进制。这是一个快速转换器http://jsfiddle.net/8ajxdLap/4/
function rgb2hex(rgb) {
var rgbm = rgb.match(/^rgba?[\s+]?\([\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?,[\s+]?((?:[0-9]*[.])?[0-9]+)[\s+]?\)/i);
if (rgbm && rgbm.length === 5) {
return "#" +
('0' + Math.round(parseFloat(rgbm[4], 10) * 255).toString(16).toUpperCase()).slice(-2) +
("0" + parseInt(rgbm[1], 10).toString(16).toUpperCase()).slice(-2) +
("0" + parseInt(rgbm[2], 10).toString(16).toUpperCase()).slice(-2) +
("0" + parseInt(rgbm[3], 10).toString(16).toUpperCase()).slice(-2);
} else {
var rgbm = rgb.match(/^rgba?[\s+]?\([\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?/i);
if (rgbm && rgbm.length === 4) {
return "#" +
("0" + parseInt(rgbm[1], 10).toString(16).toUpperCase()).slice(-2) +
("0" + parseInt(rgbm[2], 10).toString(16).toUpperCase()).slice(-2) +
("0" + parseInt(rgbm[3], 10).toString(16).toUpperCase()).slice(-2);
} else {
return "cant parse that";
}
}
}
$('button').click(function() {
var hex = rgb2hex($('#in_tb').val());
$('#in_tb_result').html(hex);
});
body {
padding: 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Convert RGB/RGBA to hex #RRGGBB/#AARRGGBB:<br>
<br>
<input id="in_tb" type="text" value="rgba(200, 90, 34, 0.75)"> <button>Convert</button><br>
<br> Result: <span id="in_tb_result"></span>
【讨论】:
注意??
在 HTML/CSS(浏览器代码)中,格式为 #RRGGBBAA,alpha 通道作为最后两个十六进制数字。
【讨论】:
就用这个吧:
android:background="#00FFFFFF"
它会完成你的工作。
【讨论】:
如果您有十六进制值,并且只是想知道 alpha 的值是多少,这个 sn-p 可能会有所帮助:
const alphaToHex = (alpha => {
if (alpha > 1 || alpha < 0 || isNaN(alpha)) {
throw new Error('The argument must be a number between 0 and 1');
}
return Math.ceil(255 * alpha).toString(16).toUpperCase();
})
console.log(alphaToHex(0.45));
【讨论】:
刚刚遇到这个,透明度的简短代码就是 #00000000。
【讨论】:
标准的十六进制颜色代码有六个字符,例如#000000 - 黑色,超过六个字符的十六进制颜色代码(可能是 8 个字符,例如 #82bc00 - 绿色)超过标准数量,使最后两个字符定义透明度等级。 因此,如果您需要获得绝对透明度,您可以将 00 添加到任何十六进制颜色,但为了统一,您可以使用 #00000000
.green{
background: #82bc00 /*actual green*/
}
.subgreen{
background: #82bc0070 /*green with little transparency*/
}
.greenparency{
background: #82bc0040 /*green with much transparency*/
}
.transparency{
background: #82bc0000 /*full transparency over green*/
}
<div class="green"> green background color </div>
<div class="subgreen"> green background color </div>
<div class="greenparency"> green background color </div>
<div class="transparency"> green background color </div>
【讨论】: