Example of using css to achieve the effect of background translucent text being opaque-CSS Tutorial-php.cn

Example of using css to achieve the effect of background translucent text being opaque

不言

Release： 2018-05-09 11:05:41

Original

1812 people have browsed it

This article mainly introduces the example of css implementation of background translucent text opaque effect. It has certain reference value. Now I share it with you. Friends in need can refer to it.

This article introduces the css implementation. An example of the effect of background translucent text being opaque is shared with everyone. 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 p{
                height: 55px;
                border-bottom: 1px   solid   #FFFFFF;
                line-height: 55px;
                
            }
            
            .aside  p  font{
                font-weight: 800;
                
            }
            
            .aside  p  span{
                font-weight: 800;
                margin-left:18px;
            }
            
            
        </style>
    </head>
    <body>
        <p  class="aside">
            <p>
                <font>留置室1 </font >
                <span>10人</span>
            </p>
            
            <p>
                <font>留置室1 </font >
                <span>4人</span>
            </p>
            
            <p>
                <font>留置室1 </font >
                <span>12人</span>
            </p>
            
            <p>
                <font>留置室1 </font >
                <span>6人</span>
            </p>
            
            <p>
                <font>留置室1 </font >
                <span>8人</span>
            </p>
            
        </p>
    </body>
</html>

Copy after login

The color can be adjusted according to the palette

The above is the entire content of this article. For more related content, please pay attention to the PHP Chinese website.

Related recommendations:

CSS to realize sprites and font icons

CSS to realize the dynamic effect of mouse movement in and out

The above is the detailed content of Example of using css to achieve the effect of background translucent text being opaque. For more information, please follow other related articles on the PHP Chinese website!