最近开始写一些 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 中如何设置支持透明度的颜色字段

我们知道有个 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」也很快会加上该功能：