add hex alpha (#25260)
This commit is contained in:
@ -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/)
|
||||
|
||||
|
||||
|
Reference in New Issue
Block a user