A brief discussion on two methods of achieving semi-transparent background color in CSS

When laying out the page, in order to give users a different visual effect, you need to set the background color of the div to a semi-transparent state. Do you know how to set it?

Next, let’s talk about how to make the background color of a div semi-transparent in two ways, as well as the advantages and disadvantages of the two methods. Friends who are interested can come and have a look, I hope it will be helpful to you.

First, we use the familiar CSS property opacity to change the background color of the div.

describe:

The background color of the large div outside is yellow, and the background color of the small div inside is red. Now we need to set the background color of the large div to be semi-transparent. We set the opacity attribute value to 0.5. The code is as follows:

HTML part:

 <div class="aa">
     <divclass="bb"I am the content</div>
 </div>

CSS part:

 .aa{
 
     width: 250px;
     height: 250px; 
     background: yellow;             
     opacity: 0.5;
     }
 
 .bb{ 
     width: 150px; 
     height: 150px; 
     background: red;
     }

Effect picture:

As shown in the figure, the background color does become translucent, but the background and text of the small div inside become translucent. This may not be the effect we want, so we generally do not use this method. Of course, if you want everything in the div to be transparent during page layout, use opacity.
Next, we use another method, background-color:rgba(0,0,0,0~1). Using this method will only set the div background transparent without affecting the content in the div.
The HTM part is the same, just change opacity to rgba.

The code is as follows:

 .aa{
 
     width: 250px;
     height: 250px; 
     background-color: rgba(255,255,0,0.5);
     }
 
 .bb{ 
     width: 150px;
     height: 150px;
     background: red; 
     }

Effect picture:

It is clear from the picture that after the transparency of the large div is changed, it has no effect on the background and text inside. So we usually use background-color:rgba(0,0,0,0~1) to set the background color transparent.

The above introduces two ways to change the transparency of the div background color. They each have their own advantages and disadvantages. The specific method to be used should be based on the needs. Beginners can practice more to deepen their understanding. I hope it will be helpful to you.