How to set the transparency of the background color on the front end Detailed explanation of the rgba() function in css: background-color: rgba(255,192,203,0.3)

Preface

Today, when I was developing the mobile terminal, I felt that there was no background color and it was a bit ugly. In addition, I made a cake app. I thought that the warm color should look good, so I used this line of code.

background-color: rgba(255,192,203,0.2);

The effect achieved is shown in the figure:

Next, we will introduce how to use the rgba() function in css

Detailed explanation of rgba() function

The rgba() function uses the superposition of red®, green (g), blue (b), and transparency (a) to generate various colors.

rgba means red, green, blue, transparency (red, green, blue, alpha)
in the corresponding position represents the corresponding color and transparency

Red (r) An integer between 0 and 255, representing the red component of the color.
Green (g) An integer between 0 and 255, representing the green component in the color.
Blue (b) An integer between 0 and 255, representing the color. Blue component
Transparency (a) is between 0 and 1, representing transparency

E.g:

background-color:rgba(255,0,0,0.5); //红色

background-color:rgba(0,255,0,0.5); //绿色

background-color:rgba(0,0,255,0.5); //蓝色

background-color: rgba(255, 255, 255, 0); //则表示完全透明的白色

background-color: rgba(0, 0, 0, 1); //则表示完全不透明度的黑色

Share another little trick hahaha

If you want to know the color you want to change to RGB color value

For example, I saw the color number of this cute hair color,
so I just Ctrl+Alt+A, then press C to copy the color number,

and then paste the RGB value of this color number. For example, mine: 243,218,222

The premise is that you want to open QQ hahahaha

https://blog.csdn.net/hanhanwanghaha Welcome to follow this super invincible and cute duck. If you have any questions, you can leave a private message and you will reply if you see it!
Creation is not easy, if reprinted, please indicate the source