<!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实现背景半透明文字不透明的效果的更多相关文章

  1. [小技巧]兼容IE6的纯CSS背景半透明文字不透明

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. 兼容IE、Firefox的背景半透明内容不透明设置

    首先要说明的是背景是内容的祖先元素.如果是兄弟节点那就没有必要记录这篇文章了. 记录一下,知其然也知其所以然. IE8-特点: 1.不支持"opcity:0.5;"这种写法,只支持 ...

  3. DIV背景半透明文字不半透明的样式

    DIV背景半透明,DIV中的字不半透明 代码如下:<body bgcolor="#336699"> <div style="filter:alpha(o ...

  4. div半透明背景，文字不透明

    background: rgba(255, 255, 255, 0.8) !important; /* IE无效,FF有效 */ background: #fff; filter: alpha(opa ...

  5. JS实现背景透明度可变，文字不透明的效果

    最近项目里需要实现这么个功能,类似网游中的聊天框,背景都是透明的,但是文字是不透明.所以如果简单的使用opacity(非IE)和alpha滤镜(IE)是无法实现这个效果的,会造成全部透明. 解决办法如 ...

  6. CSS 实现背景半透明

    IE过渡滤镜 + CSS3 rgba 即可完美实现. 具体实现代码如下: .transparent {     background:rgba(0, 0, 0, 0.3);     filter:pr ...

  7. 利用animate.css和es6制作文字向上滚动的效果

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <link rel= ...

  8. CSS实现背景透明而背景上的文字不透明完美解决

    在我们设计制作一些网页的时候可能会用到半透明的效果,首先我们可能会想到用PNG图片处理,当然这是一个不错的办法,唯一的兼容性问题就是ie6 下的BUG,但这也不困难,加上一段js处理就行了.但假如我们 ...

  9. CSS实现背景透明/半透明效果的方法

    全透明代码:{background:transparent} 半透明代码:{filter:alpha(opacity=80);-moz-opacity:0.8;width:auto !importan ...

随机推荐

  1. Javascript 模块化理解

    原始时代: script标签引入javascript文件 -------- html ------- <div id="result"></div> < ...

  2. 如何修改Web.Config里面的值

    0.先添加 <add key="MAXNUM" value="6" /> 1.读取值 string maxNum = ConfigurationMa ...

  3. pythong中的全局变量的调用和嵌套函数中变量的使用

    全局变量调用:想要在自定义的函数中使用全局变量,就得要在函数用关键字global声明,然后就可以对全局变量进行修改.嵌套函数中的变量的调用:要在嵌套的变量中,使用nonlocal的声明'''num = ...

  4. Android布局之LinearLayout

    LinearLayout 1.核心属性 高度:layout_height   (基于内容 wrap_content:基于父控件:) 宽度:layout_width 方向:orientation  (纵 ...

  5. CCF模拟题 窗口

    窗口 时间限制: 1.0s 内存限制: 256.0MB   问题描述 在某图形操作系统中,有 N 个窗口,每个窗口都是一个两边与坐标轴分别平行的矩形区域.窗口的边界上的点也属于该窗口.窗口之间有层次的 ...

  6. Lua刚開始学习的人（一）--Lua 简单教学

    近期因为工作原因.临时木有<Oracle起步学习>续集.领导知道学习下Lua脚本语言.看了一周了.趁热打铁,留下点实用的东西吧. 本系列会主要针对宿主语言为 Delphi,原理都是一样的, ...

  7. 彻查网络局部网段内Ping时断时续的问题

    前两天须要安装2台server,结果前期一直有问题的网络又来了,明明vlan内能ping通,可是与vlan外却ping不同. 这个现象非常像是arp病毒,于是周末的时间我们就进行了一次彻底的排查,一定 ...

  8. 记真实自己，炫精彩人生---《爱记》app使用体验

    真的有款神器吗,能找到合适的Ta,能秀出自己的新生活,能让自己的心情舒爽,有,体验了下.就是爱记.果粉的福利. [爱记]是集心情记录.分享.评价与交流于一体的工具,TA是你心灵休憩的港湾,也是你记忆放 ...

  9. IDC机房KVM应用案例分析

    IDC机房KVM应用案例分析 一.背景介绍 随着信息技术的发展,各行各业都在马不停蹄的开展着各自的信息化建设步伐.对于设计制造创新科技产品为运行主业的设计院而言,内部IT基础设备与机房管理结构的完善与 ...

  10. Kinect 开发 —— 图片浏览

    总体思路 首先运用WPF编写一个简单的支持多点触控的图片浏览程序,这方面您可以参看MSDN上的这篇文章,上面有代码,可能需要FQ才能下载.中文的话,您可以参考Gnie同学关于在WPF上面多点触屏(Mu ...