CSS only changes the background transparency, does not change child element transparency

In general, we can use CSS's Opcity property to change the transparency of an element, but the transparency of the child elements under its element will also be changed, even if the child element is redefined, for example:

HTML code

1. <div style="opacity:0.4; Background-image:url (...); " >
2. <div style="opacity:1.0;" >
3. Display text
4. </div>
5. </div>

The transparency of the text element will also be 0.4.

Then think about it, if there is a way to only change the transparency of the background can solve the problem.

Method 1: Using a transparent picture for the background can be achieved, but is there a simpler way to do it?

Method 2: Use Rgba.

For example:

HTML code

1. <div style="0, 0, 0.4)">
2. <div>
3. Display text
4. </div>
5. </div>

CSS only changes the background transparency, does not change child element transparency