First of all, opacity is a css property that can set the transparency of any element, including element content, borders and backgrounds
[Its value is from 0 to 1, indicating the change from completely transparent to completely opaque. When opacity is used to set the transparency of an element, the element and its content will have the same transparency]
The rgba of background is a way to set the background color of an element in css, and it can also be used to set the transparency of the background image. The range of its transparency is rgba(r,g,b,a), and a represents transparency, and the value range is 0 to 1
The difference is: the rgba of background can independently control the background color of the element or the transparency of the image without affecting the transparency of the element content and border, and rgba can also be used together with box-shadow and text-shadow
Both rgba() and opacity can achieve transparency effects, but the biggest difference is that opacity acts on elements and the transparency of all content in the element cable
And rgba() only acts on the color of the element or its background color. (Child elements of elements that set rgba transparency will not inherit the transparency effect! )