美文网首页计算机微刊程序员让前端飞
css实现背景半透明文字不透明的效果

css实现背景半透明文字不透明的效果

作者: 祈澈菇凉 | 来源:发表于2018-05-07 18:18 被阅读154次
    图片.png
    
    <!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>留置室1 </font >
                    <span>10人</span>
                </div>
                
                <div>
                    <font>留置室1 </font >
                    <span>4人</span>
                </div>
                
                <div>
                    <font>留置室1 </font >
                    <span>12人</span>
                </div>
                
                <div>
                    <font>留置室1 </font >
                    <span>6人</span>
                </div>
                
                <div>
                    <font>留置室1 </font >
                    <span>8人</span>
                </div>
                
            </div>
        </body>
    </html>
    
    

    颜色可根据调色板自行调色


    图片.png

    原文作者:祈澈姑娘
    技术博客:https://www.jianshu.com/u/05f416aefbe1

    90后前端妹子,爱编程,爱运营,爱折腾。
    坚持总结工作中遇到的技术问题,坚持记录工作中所所思所见,欢迎大家一起探讨交流。

    相关文章

      网友评论

        本文标题:css实现背景半透明文字不透明的效果

        本文链接:https://www.haomeiwen.com/subject/rcdvrftx.html