Detailed explanation of the use of CSS3 rgb and rgba (transparent color)

I believe everyone is very sensitive to colors. Colors exist wherever our eyes see. So what do we use to represent colors in CSS? There are three ways to define colors in CSS: using color methods (RGB, RGBA, HSL, HSLA), hexadecimal color values, and predefined color names. We often use RGB and RGBA. So let’s talk about the differences between them!

The meaning of rgb and rgba

RGB is the abbreviation of Red, Green, and Blue. RGBA color values ​​are an extension of RGB color values, adding an alpha channel, which specifies the opacity of the object.

1. Basic syntax:
R: Red value. Positive integer (0~255) or percentage (0.0% - 100.0%)
G: Green value. Positive integer (0~255) or percentage (0.0% - 100.0%)
B: Blue value. Positive integer (0~255) or percentage (0.0% - 100.0%)
A: Transparency. The value is between 0 and 1, and cannot be negative.

For RGB color value search, please refer to: https://www.sioe.cn/yingyong/yanse-rgb-16/ (hexadecimal can also be used to represent various colors in CSS, and the hexadecimal values ​​of various colors can also be found on this website).

2. Browser compatibility:

RGB compatible:

RGBA compatible:

http://caniuse.com/ You can use this website to check for browser compatibility issues for the attributes you want to use.

3. Writing format of rgb and rgba

The writing format of rgb: rgb(90,50,25);

in The first number (90) represents the Red color ( the red value ), The second number (50) represents the Green color ( green value ), The third number (25) represents the Blue color ( blue value ). The larger the number (not exceeding 255), the more corresponding colors are added.

The writing format of rgba: rgba(90,50,25,0.5);

From the above we can see that the RGBA color value is an extension of the RGB color value, adding an alpha channel, which specifies the opacity of the object. The first three values ​​are the same as those represented by rgb. The value of a is between 0 and 1, 0 represents transparent color, 1 represents opaque, and 0.5 represents 50% transparency of each (R, G, B) color, that is, each color is semi-transparent. The a here can also be abbreviated to .5. As long as there is decimal transparency, it can be abbreviated in this way.

The difference between RGB and RGBA

1. rgb+opacity (not compatible with IE)
Because the a in rgba represents the transparency of the object, the opacity attribute (also represents transparency) + rgb is used here to illustrate the difference between rgb and rgba. The opacity attribute can also be expressed using the filter attribute, for example: filter:Alpha(opacity=50), where 50 represents 50% transparency. Here are some examples:

<div class="box">
	<p>rgb+opacity:</p>
	<div class='one'>25%</div>
	<div class='two'>50%</div>
	<div class='three'>75%</div>
	<div class='four'>100%</div>
</div>

.box{
	margin-bottom: 10px;
	overflow: hidden;	
}
.box>div{
	width:100px;
	height:100px;
	float: left;
}
.box>div{
	background:rgb(255,0,0)
}
.box>.one{
	opacity:.25;
}
.box>.two{
	opacity:.5;
}
.box>.three{
	opacity:.75;
}
.box>.four{
	opacity:1
} 

From the above example, we can see that as the transparency changes, the div will become transparent, and the text on the div will also become transparent, becoming increasingly unclear.

2. RGBA

Because the a in rgba represents the transparency of the object, we can directly use background with rgba to illustrate the issue of transparency. Here are some examples:

<div class="box1">
	<p>rgba</p>
	<div class='one'>25%</div>
	<div class='two'>50%</div>
	<div class='three'>75%</div>
	<div class='four'>100%</div>
</div>

```css
.box1>div{
	width:100px;
	height:100px;
	float: left;
}
.box1>.one{
	background:rgba(255,0,0,1);
}
.box1>.two{
	background:rgba(255,0,0,.75);
}
.box1>.three{
	background:rgba(255,0,0,.5);
}
.box1>.four{
	background:rgba(255,0,0,.25);
} 

From the above example, we can see that as the transparency changes, the div will become transparent, and the text on the div is not affected by the transparency and maintains the original color of the text.

RGBA can not only be applied to the background, we can also use it anywhere where the color is set. Here are a few examples:

The first one: font color. You can set the transparency while setting the color.

<p class="p1">Font color</p>
<p class="p2">Font color</p>

.p1{
	color:rgb(255,0,0)
}
.p2{
	color:rgba(255,0,0,.5)
} 

Second: border color border-color

<div class="div3"></div>
<div class="div4"></div>

.div3,.div4{
	width:100px;
	height:100px;
	background:#f00;
}
.div3{
	border:5px solid rgb(0,0,0)
}
.div4{
	border:5px solid rgba(0,0,0,.2)
} 

The third type: font shadow color text-shadow

 <p class="p1">Font shadow color</p>
<p class="p2">Font shadow color</p>

.p1{
	text-shadow:1px 2px 1px rgb(255,0,0);
}
.p2{
	text-shadow:1px 2px 1px rgba(255,0,0,.5);
} 

Fourth: Change the border shadow color

<div class="div3"></div>
<div class="div4"></div>

.div3,.div4{
	width:100px;
	height:100px;
	background:#000;
}
.div3{
	box-shadow: 1px 5px 5px rgb(255,0,0);
	margin-bottom: 20px;
}
.div4{
	box-shadow: 1px 5px 5px rgba(255,0,0,.5) ;
} 

Summarize

1. From the above examples, we also know that RGBA is better than setting CSS transparency for elements, because a single color will not affect the transparency of the entire element. It will not affect other attributes of the element, such as borders and fonts, and will not affect the related transparency of other elements.

2. Use Opacity for transparency. If Opacity is used in the parent element, other child elements will be affected.

3. Finally, I need to tell you that the RGBA method can only be displayed normally in browsers that support RGBA attributes.

This is the end of this article about the detailed use of CSS3 rgb and rgba (transparent color). For more related CSS3 rgb and rgba content, please search 123WORDPRESS.COM’s previous articles or continue to browse the related articles below. I hope everyone will support 123WORDPRESS.COM in the future!