What is the difference between rgba,rgb and opacity in CSS
This article mainly introduces "what is the difference between rgba,rgb and opacity in CSS". In daily operation, I believe that many people have doubts about the difference between rgba,rgb and opacity in CSS. The editor consulted all kinds of materials and sorted out simple and easy-to-use methods of operation. I hope it will be helpful to answer the question of "what is the difference between rgba,rgb and opacity in CSS?" Next, please follow the editor to study!
The difference between rgb and rgba:
Rgb refers to red, green and blue. Values range from 0 to 255. for example, black can be expressed as rgb.
Rgba means red (red), green (green), blue (blue), and transparency (opacity). The value of transparency is between 0 and 1
The difference between rgba and rgb is that rgba can set the transparency of the background color, but rgb cannot
Example 1: set the background color to red with background: rgb
one
two
three
four
five
six
seven
eight
nine
ten
eleven
twelve
thirteen
fourteen
fifteen
sixteen
seventeen
eighteen
nineteen
twenty
twenty-one
twenty-two
twenty-three
twenty-four
twenty-five
twenty-six
twenty-seven
.a1 {
Width: 300px
Height: 200px
Position: relative
Border: 1px solid black
}
.a2 {
Width: 200px
Height: 100px
Position: absolute
Top: 50px
Left: 50px
Background: rgb (255j0pl 0)
}
Effect picture:
Example 2: set the background color to translucent red with background: rgba
one
two
three
four
five
six
seven
eight
nine
ten
eleven
twelve
thirteen
fourteen
.a1 {
Width: 300px
Height: 200px
Position: relative
Border: 1px solid black
}
.a2 {
Width: 200px
Height: 100px
Position: absolute
Top: 50px
Left: 50px
Background: rgba (255pc0pl 0pr 0.5)
}
Effect picture:
The difference between rgba () and opacity:
Both can be set transparency, but the opacity attribute will act on the element and all elements within the element, such as child elements, rgba will only act on itself, not on child elements, the specific difference please compare the effect.
Example 3: set transparency with opacity: 0.5.The code is as follows:
one
two
three
four
five
six
seven
eight
nine
ten
eleven
twelve
thirteen
fourteen
fifteen
sixteen
seventeen
eighteen
nineteen
twenty
twenty-one
.a1 {
Width: 300px
Height: 200px
Position: relative
Border: 1px solid black
}
.a2 {
Width: 200px
Height: 100px
Position: absolute
Top: 50px
Left: 50px
Background: red
Opacity: 0.5
}
I am the content of the box, and the text does not need to be transparent.
Effect picture:
You can see the difference between rgba,rgb and opacity from the effect picture, rgb can only set the background color; rgba can set transparency, and transparency will not act on the elements inside, opacity can set transparency, but transparency will act on the elements inside.
At this point, the study on "what is the difference between rgba,rgb and opacity in CSS" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!
