Example of using CSS to achieve semi-transparent background and opaque text

This article introduces an example of how to use CSS to achieve the effect of semi-transparent background and opaque text. The details are as follows:

The effect is as follows:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            html{
                background: #6a8db1;
            }
            .aside{
                
                background-color:rgba(244,251,251,0.47);
                
                border: 1px solid #FFFFFF;
                width: 200px;
                text-align: center;
                color: #FFFFFF;
            }
            
            .aside div{
                height: 55px;
                border-bottom: 1px solid #FFFFFF;
                line-height: 55px;
                
            }
            
            .aside div font{
                font-weight: 800;
                
            }
            
            .aside div span {
                font-weight: 800;
                margin-left:18px;
            }
            
            
        </style>
    </head>
    <body>
        <div class="aside">
            <div>
                <font>Holding Room 1</font>
                <span>10 people</span>
            </div>
            
            <div>
                <font>Holding Room 1</font>
                <span>4 people</span>
            </div>
            
            <div>
                <font>Holding Room 1</font>
                <span>12 people</span>
            </div>
            
            <div>
                <font>Holding Room 1</font>
                <span>6 people</span>
            </div>
            
            <div>
                <font>Holding Room 1</font>
                <span>8 people</span>
            </div>
            
        </div>
    </body>
</html>

The color can be adjusted according to the palette

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

<<: Detailed explanation of installing redis in docker and starting it as a configuration file

>>: The use of MySQL triggers and what to pay attention to