We need to know a few css properties:
1.hsla
H is the chromaticity values between 0 degrees to 360 degrees, 0 degrees is red, green is 120 degrees, 240 degrees is blue. 360 degrees is red.
S is the saturation, the color purity is a percentage value, ranging from 0% to 100%, 0% saturation minimum, maximum saturation 100%
L is the luminance, but also a percentage value, ranging from 0% to 100%, 0% darkest, 100% of the brightest.
A opacity, the value range of 0.0 to 1.0, where 0.0 is completely transparent and 1.0 is completely opaque.
The above is taken blog https://www.cnblogs.com/zhoushengxiu/p/5710691.html
2.background-clip
Background-clip drawing area specified background values which border-box, padding-box, content-box, no-clip. BACKGROUND parameters respectively cut from the bezel, or the filling or the content area outwardly. no-clip means no crop and border-box parameters show the same effect.
The above is taken w3school and Mu class network.
Based on the above information, we can understand the principle of semi-transparent frame, that is to set a semi-transparent border and background-clip using the padding-box fills the background from the beginning cut.
code：
effect:
