Shulou(Shulou.com)06/01 Report--

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!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.