add hex alpha (#25260)

This commit is contained in:
ir3ne
2018-12-10 00:36:03 +01:00
committed by Randell Dawson
parent 1e658a7252
commit b9d01d13e6

View File

@ -74,6 +74,18 @@ img:hover {
Using the rgba value is most preferable when the background has content like text compared to using the background-color property then going on to use the opacity property. First, it's shorter and second, it eliminates the problem of having the content's transparency change with that of its background, if it's something you do not want.
**Hex Alpha**
```css
.class-name {
background: #00ff0080;
}
```
The example above sets the background with a 50% opacity using hex alpha code. The alpha digit is the last two numbers `80`. The formats are sometimes referred to as #RRGGBBAA and #RGBA and the the AA part is a hex representation of 0-100. For example the hex alpha code of 0% is `00` and the hex alpha code of 100% is `FF`.
[A codepen example to show hex alpha values](https://codepen.io/chriscoyier/pen/XjbzAW)
[A codepen example to show background opacity ranges](https://codepen.io/lvcoulter/full/dVrwmK/)