Home > Web Front-end > CSS Tutorial > Example of using css to achieve the effect of background translucent text being opaque

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

不言
Release: 2018-05-09 11:05:41
Original
1830 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!

Related labels:
css
source:php.cn
Statement of this Website
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
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template