Use the transparency in the css3 background gradient to set the background gradient of different colors. css3 transparency

Use the transparency in the css3 background gradient to set the background gradient of different colors. css3 transparency

To add transparency, we use the rgba () function to define color nodes. The last parameter in the rgba () function can be a value from 0 to 1, which defines the transparency of the color: 0 indicates completely transparent, and 1 indicates completely opaque. The percentage after rgba () indicates the position.

Code:

Background:-webkit-linear-gradient (top, rgba (255,255,255, 0.4) 0%, rgba (255,255,255, 0.2) 75%, rgba (255,255,255, 0) 98% ); /* Safari, Chrome */background:-o-linear-gradient (bottom, rgba (255,255,255, 0.4) 0%, rgba (255,255,255, 0.2) 75%, rgba (255,255,255, 0) 98%);/* Opera */background:-moz-linear-gradient (bottom, rgba (255,255,255, 0.4) 0%, rgba (255,255,255, 0.2) 75%, rgba (255,255,255, 0) 98%);/* Firefox */background: linear-gradient (to bottom, rgba (255,255,255, 0.4) 0%, rgba (255,255,255, 0.2) 75%, rgba (255,255,255, (0) 98%);/* standard syntax (must be placed at the end )*/

 

Note: Internet Explorer 9 and earlier versions do not support gradient.