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


    5640239-e79e96636b1658bd.png
    图片.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;
                     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>
    
    

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


    5640239-48119bd0840ee3d3.png
    图片.png

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

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

  • 相关阅读:
    DOM操作:
    定时器
    7.thinkphp框架控制器
    1.thinkphp框架介绍
    4.thinkphp框架url访问
    6.thinkphp框架路由
    2.thinkphpk框架基础
    5.thinkphp框架配置文件
    3.thinkphp框架入口文件
    8.thinkphp框架数据库
  • 原文地址:https://www.cnblogs.com/ting6/p/9725521.html
Copyright © 2020-2023  润新知