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

Remove duplicate information (#27163) 

Minor formatting and removal of information listed more than once in the article
pull/24375/head^2
Cindy Yates 2018-12-09 17:34:09 -07:00 committed by Randell Dawson
parent 8f20aaf0b9
commit 8ca7abd3f6
1 changed files with 7 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -32,6 +32,7 @@ You have to add the following CSS property to achieve the transparency levels.
.class-name {
opacity:0.5;
}
/* Opacity value can be anything between 0 and 1; */
```
@ -84,15 +85,17 @@ Using the rgba value is most preferable when the background has content like tex
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)
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/)
#### More Information:
For more information visit [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/opacity)
[Opacity CSS property at CSS-Tricks](https://css-tricks.com/almanac/properties/o/opacity/)
+ [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/opacity)
+ [CSS Opacity / Transparency Property at W3Schools](https://www.w3schools.com/css/css_image_transparency.asp)
+ [Opacity CSS property at CSS-Tricks](https://css-tricks.com/almanac/properties/o/opacity/)
Browser support: <a href= 'https://caniuse.com/#search=opacity' target= '_blank' rel= 'nofollow'>caniuse</a>