如何在CSS中为十六进制颜色值添加透明度效果

如需给现有6位十六进制颜色值添加透明度，直接在原有色值后追加2位十六进制的alpha值，转为8位#rrggbbaa格式即可使用。比如原有颜色为#ECC040，调整后格式为#ECC040xx，其中xx为透明度对应的十六进制值。

#rrggbbaa颜色格式已被绝大多数现代浏览器支持，正常换算alpha值即可生效。

常用透明度与十六进制对应参考 #

• 10% 透明度对应 1A
• 20% 透明度对应 33
• 30% 透明度对应 4D
• 40% 透明度对应 66
• 50% 透明度对应 80
• 60% 透明度对应 99
• 70% 透明度对应 B3
• 80% 透明度对应 CC
• 90% 透明度对应 E6
• 100% 不透明对应 FF

更新：以下为完整可运行的代码示例

CSS代码 #

.background{
  background-color:red;
}
.container1{
  height: 30px;
  width: 100%;
  background-color: #ECC0401A; /* 对应10%透明度 */
}
.container2{
  height: 30px;
  width: 100%;
  background-color: #ECC04033; /* 对应20%透明度 */
}
.container3{
  height: 30px;
  width: 100%;
  background-color: #ECC04066; /* 对应40%透明度 */
}
.container4{
  height: 30px;
  width: 100%;
  background-color: #ECC04099; /* 对应60%透明度 */
}
.container5{
  height: 30px;
  width: 100%;
  background-color: #ECC040CC; /* 对应80%透明度 */
}
.container6{
  height: 30px;
  width: 100%;
  background-color: #ECC040FF; /* 对应100%不透明 */
}

HTML代码 #

<div class="background">
  <div class="container1"></div>
  <div class="container2"></div>
  <div class="container3"></div>
  <div class="container4"></div>
  <div class="container5"></div>
  <div class="container6"></div>
  <div class="container7"></div>
</div>

内容的提问来源于stack exchange，提问作者Barnabas