最近开始写一些 WordPress 专业知识的文章，阅读数奇低，然后我就发一些微信昵称技巧，大家又说我天天发这些小学生爱玩的玩意，写点公众号真不容易。
那我两天发点专业的东西，两天发点小学生的东西，剩下三天我看着办，这样总行吧？
哈哈，那今天就发布一点点专业的东西，就是我们做网页开发的时候的时候如何设置背景色透明度。
为什么背景要设置透明度？
首先说下为什么要使用有透明度的背景色，比如最近我给公司实现做的表格应用的时候，有个单元格条件样式的功能：
就是类似于 Excel 的条件格式化的功能，让数据根据不同的值显示不同的样式，如上图所示，可以设置，加粗，文本颜色，和填充颜色，其中填充就是设置单元格的背景颜色 ：
由于我们的表格每一行本身就有间隔背景色（或者说斑马色），如果我们设置的单元格背景没有透明度的话，就会看不到间隔色，看数据就不太方便，另外也会比较显眼，抢过了主体文本的颜色：
也有人可能喜欢这种比较强烈的配色方式，不过不管了，我觉这个例子就是想给大家说下，我做了一个很牛逼的表格应用，可以自定义单元格样式，嘻嘻，另外也是为了点下今天的主体，怎么设置背景透明度。
如何设置背景透明度？
首先这个是 CSS 的活，我们都知道设置背景色的 CSS 代码：
// 使用 RGB
.background {
background-color: rgb(255, 0, 0); /* 红色背景 */
}
// 使用 HSL
.background {
background-color: hsl(120, 100%, 50%); /* 绿色背景 */
}
// 使用 HEX 6位16进制颜色代码
.background {
background-color: #0000FF; /* 蓝色色背景 */
}
// 使用 HEX 3位16进制颜色代码
.background {
background-color: #00F; /* 蓝色色背景 */
}上面展示了 RGB 和 HSL 以及 HEX 16 进制三种设置背景的方法，但是这样设置都是不透明的。
那么如何设置透明度呢？其实也非常简单，只要给上面的颜色加上透明度的 Alpha 通道即可：
// 使用 RGBA
.background {
background-color: rgba(255, 0, 0, 0.5); /* 红色背景 50% 透明度*/
}
// 使用 HSLA
.background {
background-color: hsla(120, 100%, 50%, 0.3); /* 绿色背景 50% 透明度*/
}
// 使用 HEX 8位16进制颜色代码
.background {
background-color: #0000FF80; /* 蓝色色背景 50% 透明度*/
}
// 使用 HEX 4位16进制颜色代码
.background {
background-color: #00F8; /* 蓝色色背景 50% 透明度*/
}其中 RGB 和 HSL 两种方法则在起方法名后面加上 A 即可，然后取值范围从 0（完全透明）到 1（完全不透明）。
16 进制的方法则有点复杂，使用16进制颜色代码设置背景透明度可以通过使用8位（#RRGGBBAA）或4位（#RGBA）的16进制格式来实现，其中最后两位（AA）或最后一位（A）代表透明度（Alpha）。透明度的值范围从00（完全透明）到FF（完全不透明）。
所以上面的例子中 0000FF 是蓝色，80（即128/255）表示大约50%的透明度。另外需要特别注意一下虽然现代浏览器普遍都支持16进制颜色透明度代码，但在某些旧版本的浏览器中可能不会正常工作，因此，如果你需要兼容，建议还是使用 rgba() 或 hsla() 函数。
另外使用 opacity 定义透明度，但是它会让整个元素透明度都下降，包括它的背景、文本和边框等，这个时候要注意你是要设置整体还仅仅是背景的透明度了。
.background {
background-color: #0000FF; /* 蓝色色背景 */
opacity: 0.5; /* 整个元素50% 透明度 */
}在 WordPress 中又如何设置？
我们知道 WordPress 有个 wp-color-picker 组件，可以让我们在设置输入字段的时候，可以直接选择颜色（在 WPJAM Basic 添加字段的时候，将 type 设置为 color 即可）：
但是他无法设置透明度，Sergio 就更新了一下 wp-color-picker 组件，发布了 wp-color-picker-alpha 组件，支持通过拖拉即可设置颜色透明度，如下图所示：
哈哈，WPJAM Basic 最新版也支持了该功能，在设置添加字段的时候，将 type 设置为 color 之外，还需要加上 data-alpha-enabled 属性，并将其设置为 true，比如我上面设置背景色的代码：
$fields = [
'background-color' => ['type'=>'color', 'button_text'=>'填充颜色', 'data-alpha-enabled'=>true]
];我和大胡子做的模块化主题「Modular」也很快会加上该功能：
点击卡片关注「WordPress果酱」
⏬⏬ 下载 WPJAM Basic 请点击阅读原文
