Home > Article > Web Front-end > Analysis of the difference between using rgba and opacity to set transparency in css

Analysis of the difference between using rgba and opacity to set transparency in css

不言Original: 2018-06-14 16:21:202148browse

This article mainly introduces two methods of setting transparency using rgba and opacity in css, and explains the difference between the two through example demonstrations. Friends in need can refer to

1 .Use rgba to set the background color to be transparent

The effect is as follows:

<body>
    <p id="box">
        你好啊！
    </p>
</body>
body {
    background-color:red;
}
#box{
    width:200px;
    height:200px;
    margin:100px auto;
    text-align:center;
    line-height:200px;
    color:white;
    background-color:rgba(182,255,0,.5);
}

2. Use opacity to set the background color to be transparent

#box{
    width:200px;
    height:200px;
    margin:100px auto;
    text-align:center;
    line-height:200px;
    color:white;
    background-color:rgb(182,255,0);
    opacity:0.5;
}

Summary: Passed Comparing the effects in 2, we found that opacity will also affect the transparency of the font

The above is the difference and detailed explanation between the two, I hope it will be helpful to everyone~~

The above is the entire content of this article. I hope it will be helpful to everyone's study. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

How to use css to stretch and fill the background image to avoid repeated display

How to use css3 to implement multiple elements in sequence show

The above is the detailed content of Analysis of the difference between using rgba and opacity to set transparency in css. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：How to use css3 to display multiple elements in sequenceNext article：How to use css3 to display multiple elements in sequence

See more

Analysis of the difference between using rgba and opacity to set transparency in css

Related articles