This article shares with you the main isCsstwo properties related to transparency inOpacityand theRgba, mainly around these two CSSattribute differences and considerations, I hope youLearningCSS has helped. Grammar 1. Rgbafirst it is a property value, and the syntax isRgba(R,g,b,a) -Ris a red value, a positive integer| percentage -Gis a green value, a positive integer| percentage -BIs a blue value, a positive integer| percentage -Ato beAlpha(transparency), a value of0 ~ 1between the decimals,0.0(fully transparent) to1.0(completely opaque) -the positive integer above is the decimal0 ~ 255a percentage of any value between0% ~ 100%any value between the //Example:. box1{ //not limited to background color, can be text color, shadow, etc. background: Rgba (0,0,255,0.4); } 2. Opacity Opacityis a property, not a property value, and the syntax is: Opacity: Value|inherit; Valueopacity, from0.0(fully transparent) to1.0(completely opaque) //Example. box2{ background: rgb (0,0,255); Opacity: 0.4; } the Difference ·have aOpacityall descendant elements of a property are inheritedOpacityProperties, andRGBAdescendant elements do not inherit opaque properties ·look at the effect below: //part of the code. box1{ background: Rgba (0,0,255,0.4); }.box2{ background: rgb (0,0,255); Opacity: 0.4; }
It's not hard to see -RgbaIt 's just a background color with a transparent effect . -and thereOpacityThe descendants of a property element inherit this transparent property, including, but not limited to, text images, etc.Source: Network
What is the difference between opacity and Rgba in CSS?
