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

简介: 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>

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


相关文章
|
3月前
|
前端开发 JavaScript
Vue中使用纯CSS实现全屏网格加渐变色背景布局
Vue中使用纯CSS实现全屏网格加渐变色背景布局
71 0
|
1天前
|
前端开发
【CSS进阶】使用CSS gradient制作绚丽渐变纹理背景效果(下)
【CSS进阶】使用CSS gradient制作绚丽渐变纹理背景效果
26 0
|
1月前
|
前端开发 容器
CSS背景background八种属性
CSS背景background八种属性
|
1月前
|
Web App开发 弹性计算 前端开发
纯 CSS 实现多行文字截断
纯 CSS 实现多行文字截断
20 1
|
2月前
|
前端开发 容器
css 中可以让文字在垂直和水平方向上重叠的两个属性是什么?
css 中可以让文字在垂直和水平方向上重叠的两个属性是什么?
|
3月前
|
前端开发
使用CSS实现网格+渐变背景色的Web页面背景
使用CSS实现网格+渐变背景色的Web页面背景
26 0
|
3月前
|
前端开发 容器
CSS:元素显示模式与背景
CSS:元素显示模式与背景
29 0
css3文字阴影和盒子阴影
css3文字阴影和盒子阴影
|
4月前
|
前端开发
CSS背景属性之颜色渐变
CSS背景属性之颜色渐变
30 0
|
4月前
|
前端开发
css文字环绕png图片
css文字环绕png图片
38 1