greatbody
/
freeCodeCamp
mirror of https://github.com/freeCodeCamp/freeCodeCamp.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Update index.md (#31501)

pull/33485/head
Amaka Mbah 2018-10-31 15:50:00 +01:00 committed by Paul Gamble
parent c8d4aefd03
commit df8204df99
1 changed files with 4 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
guide/english/css/background-opacity/index.md
View File

@ -5,7 +5,7 @@ title: Background Opacity
The opacity property specifies the opacity/transparency of an element, that is, the degree to which the content behind the element is visible.
The opacity property can take a value from 0.0 - 1.0. The lower value, the more transparent:
The opacity property can take a value from 0.0 - 1.0. The lower the value, the more transparent:
Find more details <a href='https://www.w3schools.com/css/css_image_transparency.asp' target='_blank' rel='nofollow'>here</a>
@ -52,6 +52,9 @@ Alternatively you can use a transparent rgba value like this:
```
The example above sets the background to be black with 50% opacity. The last value of an rgba value is the alpha value. An alpha value of 1 equals 100%, and 0.5 (.5 for short) quals 50%. We use this method to add transparency to an element without affecting the content inside.
#### Some Info
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.
[A codepen example to show background opacity ranges](https://codepen.io/lvcoulter/full/dVrwmK/)