How to set background color and transparency in Vue

Background color and transparency settings

As shown above, if it is the first picture, you need to add a gray background and white "Cover" word in the upper left corner, and the background color needs to be transparent.

First, you need to know the rgba() function.

The rgba() function uses the superposition of red (R), green (G), blue (B), and transparency (A) to generate a variety of colors.

RGBA stands for Red, Green, Blue, Alpha (English: Red, Green, Blue, Alpha).

• 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 of the color.
• Blue (B) An integer between 0 and 255, representing the blue component of the color.
• Transparency (A) takes values ​​between 0 and 1, representing transparency. The smaller the value, the higher the transparency.

Here is the Vue code:

First, set the parent element position: relative; then set the child element position: absolute; adjust the position by setting left, right, top, and bottom, and then set the background color background: rgba (34,34,34,0.5);

Set the background color of the button to transparent

Use when setting the style

background-color: unset 

3.1.0 sets the background color

There is no background color set for login

The above is my personal experience. I hope it can give you a reference. I also hope that you will support 123WORDPRESS.COM.