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

css实现背景半透明文字不透明的效果_第1张图片
图片.png


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

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


css实现背景半透明文字不透明的效果_第2张图片


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

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

文末福利:关注「编程微刊」公众号 ,在微信后台回复「领取资源」,获取IT资源200G干货大全。公众号回复“1”,拉你进程序员技术讨论群


你可能感兴趣的:(前端)