An Example of Implementing Background Translucent Text Opacity by CSS

Time:2019-9-9

This paper introduces an example of how CSS achieves background translucent text opacity and shares it with you as follows:

The results are 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 > indwelling room 1 </font >
                <span> Ten people</span>
            </div>
            
            <div>
                < font > indwelling room 1 </font >
                <span> Four persons</span>
            </div>
            
            <div>
                < font > indwelling room 1 </font >
                <span> Twelve people</span>
            </div>
            
            <div>
                < font > indwelling room 1 </font >
                <span> Six persons</span>
            </div>
            
            <div>
                < font > indwelling room 1 </font >
                <span> Eight people</span>
            </div>
            
        </div>
    </body>
</html>

The color can be adjusted by itself according to the palette.

The above is the whole content of this article. I hope it will be helpful to everyone’s study, and I hope you will support developpaer more.

Recommended Today

Hadoop MapReduce Spark Configuration Item

Scope of application The configuration items covered in this article are mainly for Hadoop 2.x and Spark 2.x. MapReduce Official documents https://hadoop.apache.org/doc…Lower left corner: mapred-default.xml Examples of configuration items name value description mapreduce.job.reduce.slowstart.completedmaps 0.05 Resource requests for Reduce Task will not be made until the percentage of Map Task completed reaches that value. mapreduce.output.fileoutputformat.compress false […]