Every CSS color system has an optional alpha component that can define a color’s level of transparency. For example, to produce a background color of red that is halfway transparent for a <div> with an id of genera, we could write:
每个CSS颜色系统都有一个可选的alpha组件，可以定义颜色的透明度 。 例如，要产生id为genera的<div> 半透明的红色背景色，我们可以这样写：
#genera {
background: rgba(255, 0, 0, 0.5);
}Colors with alpha components are particularly useful for creating shadows and subtle gradients, but they can be applied anywhere that ordinary colors can, including borders and text.
具有alpha成分的颜色对于创建阴影和微妙的渐变特别有用，但是它们可以应用于普通颜色可以应用到的任何地方，包括边框和文本 。
When an alpha level is included, the color systems are referred to as rgba and hsla. These are not regarded as new systems, but as variants of rgb and hsl.
当包括alpha级别时，颜色系统称为rgba和hsla 。 这些不是新系统 ，而是rgb和hsl 变体 。
For rgba and hsla, the alpha level is measured from 0 to 1, where 0 means “completely transparent” and 1 means “completely solid” or opaque. A floating point value for alpha between these numbers will produce a partially transparent color; an alpha value of 1 will produce a color that is exactly the same as the defined color without an alpha component.
对于rgba和hsla ，alpha级别从0到1测量，其中0表示“完全透明”，而1表示“完全固体”或不透明。 这些数字之间的alpha浮点值将产生部分透明的颜色； alpha值1将产生与定义的颜色完全相同的颜色， 而没有 alpha分量。
The perceived color of a partially transparent element will depend on the color of the elements beneath it: most commonly, the <body>.
部分透明元素的感知颜色将取决于其下面元素的颜色：最常见的是<body> 。
As a floating point value, alpha can be written either with or without a loading zero. Generally speaking, the former (“0.3”) is more readable. Note that writing an rgb color definition (rather than rbga) that includes an alpha component will not work; similarly, writing an rbga color but forgetting to include an alpha component will fail to produce any color at all.
作为浮点值，可以在加载零或不加载零的情况下编写alpha。 一般来说，前者(“ 0.3 ”)更具可读性。 请注意，编写包含alpha成分的rgb颜色定义(而不是rbga )是行不通的 ； 类似地，编写rbga颜色但忘记包含alpha成分将根本无法产生任何颜色。
All modern browsers have support for alpha components in color, including IE 9+.
所有现代浏览器都支持彩色Alpha组件，包括IE 9+。
New developers are often confused between the opacity property and alpha transparency, so I wrote a short article that clarifies their differences.
新开发人员经常在opacity属性和alpha透明度之间感到困惑，因此我写了一篇简短的文章来阐明它们之间的区别。
十六进制与阿尔法？ (Hex with alpha?)
It’s also possible to produce hex colors with alpha components, which are also stated as hexadecimal values:
也可以产生带有alpha分量的十六进制颜色 ，也表示为十六进制值：
#genera {
background: #ff000077;
}The code above would produce a background color that is a halfway-transparent red. If the hex color is all “doubles”, it can also be shortcut:
上面的代码将产生半透明红色的背景色。 如果十六进制颜色全为“双精度”，则它也可以是快捷方式：
#genera {
background: #f007;
}alpha levels for hexadecimal colors are very new, and only currently work in Safari 10 and beta versions of other browsers, and thus cannot yet be used in production unless you’re using a compiler such as Sass or PostCSS that will convert #rrggbbaa into its equivalent rgba or hsla definition.
十六进制颜色的alpha级别是非常新的 ，并且仅在Safari 10和其他浏览器的beta版本中有效，因此除非在使用诸如Sass或PostCSS之类的将#rrggbbaa转换为其编译器的编译器时，否则尚不能在生产环境中使用。等效的rgba或hsla定义。
1776
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
