gaspersic/freeCodeCamp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

add RGBA, HSL, HSLA for defining color (#28145)

Browse Source
This commit is contained in:
Aris Karatarakis
2019-03-06 03:53:43 +02:00
committed by Christopher McCormack
parent 3c9e19d999
commit 35162199c6
1 changed files with 10 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
guide/english/css/background/index.md
View File

@ -28,14 +28,16 @@ h1 {
``` ```
![twobackground](https://user-images.githubusercontent.com/26467304/31036152-0607936a-a539-11e7-9e9f-a5e60ade042d.png) ![twobackground](https://user-images.githubusercontent.com/26467304/31036152-0607936a-a539-11e7-9e9f-a5e60ade042d.png)
In CSS color can be defined in a few different ways: In CSS color can be defined in the following ways:
* A valid color name such as `blue` * A valid "color" keyword name such as `blue`
* A HEX value such as `#FFFFF` (This is the hex value for white.) * Numerical color values
* An abbreviated HEX value such as '#FFF'. + A HEX value such as `#FFFFF` (This is the hex value for white.)
* An RGB value such as `rgb(76,175,80)` (This is the RGB value for light green.) + An abbreviated HEX value such as `#FFF`.
* RGBA color values are an extension of RGB color values with an alpha channel - which specifies the opacity of the object. + An RGB value such as `rgb(76,175,80)` (This is the RGB value for light green.)
* An RGBA color is specified with the rgba() function, which has the following syntax: `rgba(red, green, blue, alpha)` + RGBA value (RGB + alpha channel for contolling opacity)
* The alpha parameter is a number between `0.0` (fully transparent) and `1.0` (fully opaque). - Note: The alpha parameter is a number between `0.0` (fully transparent) and `1.0` (fully opaque)
+ HSL (Hue, Saturation, Lightness) (e.g., `hsl(115, 75%, 73%)` is HSL for light green)
+ HSLA (HSL + alpha channel for controlling opacity)
### Background Images ### Background Images
You can use the `background-image` property to set an image as a background for an element. You can use the `background-image` property to set an image as a background for an element.