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


<!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>

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

注：

原文作者：祈澈姑娘技术博客：https://www.jianshu.com/u/05f416aefbe1
90后前端妹子，爱编程，爱运营，爱折腾。
坚持总结工作中遇到的技术问题，坚持记录工作中所所思所见，欢迎大家一起探讨交流。

关注「编程微刊」公众号，在微信后台回复「领取资源」，获取IT资源300G干货大全。

公众号回复“1”，拉你进程序员技术讨论群.

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

秒客网

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

相关文章