【CSS】各百分比透明度 opacity 对应的 16 进制颜色值（例如：#FFFFFF80）

CSS 中的 opacity 属性用于设置元素的透明度，而不是改变颜色的透明度。如果你想设置具有透明度的颜色，你需要使用 rgba 或 hsla 颜色值，这些值允许你指定颜色和透明度。

16 进制颜色代码（如 #FFFFFF80）不能直接用于表示带有透明度的颜色，因为它们是用于表示不透明颜色的。不过，你可以将 RGBA 值转换为 16 进制格式。

例如，如果你有一个 RGBA 值 rgba(255, 255, 255, 0.5)，你可以转换成 16 进制格式如下：

/* 将 RGBA 转换为 16 进制 */
rgba(255, 255, 255, 0.5) -> #FFFFFF80

在这里，透明度值 0.5 转换成了 16 进制并添加到了颜色值的末尾。

如果你需要一个函数来转换 RGBA 到 16 进制，你可以使用以下代码：

function rgbaToHex(r, g, b, alpha) {
  const hex = (x) => ('0' + x.toString(16)).slice(-2); // 保证两位的十六进制数
  const alphaHex = Math.round(alpha * 255).toString(16);
  const fullHex = `#${hex(r)}${hex(g)}${hex(b)}${alphaHex}`;
  return fullHex;
}
 
// 使用例子
console.log(rgbaToHex(255, 255, 255, 0.5)); // #FFFFFF80

请注意，CSS 中并不能直接使用带有透明度的 16 进制颜色值，你需要使用 rgba() 或 hsla() 值。如果你需要在 CSS 中使用具有透明度的颜色，你应该直接使用 rgba() 或 hsla() 值。