<!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. Mysql source导入.sql文件深坑！

    刚刚接手一个项目,给老系统加功能.把数据库考出来一个.sql文件就170多M. 使用mysql命令行source 我的.sql文件. 导了一宿都没导完,然后发现里面的数据怎么是乱码呢.. 崩溃额,在排 ...

  2. javaScript 原型与原型链学习笔记

    javaScript中,原型是常用到一种方式,它能降低储存占用,写出更高效的代码 原型常用到的则是prototype属性 JavaScript prototype 属性 定义和用法 prototype ...

  3. Mirai僵尸网络重出江湖

    近年数度感染数十万台路由器的僵尸网络程序Mirai,虽然原创者已经落网判刑,但是Mirai余孽却在网络上持续变种,现在安全人员发现,Mirai已经将焦点转向Linux服务器了. 安全公司Netcout ...

  4. Cocos2dx 小技巧（十二） 一种可行的系列动画播放方式

    今早发生了一件事让我感觉特气愤!去年的这个时候,我和小伙伴们一起在操场上拍毕业照,之后有个当地报纸的记者来我们学校取材,看到我们后打算给我们拍几张创意张扬点的毕业照.之后呢,照片出来了,拍的效果大伙都 ...

  5. KETTLE使用javascript步骤过滤特殊字符

    KETTLE使用javascript步骤过滤特殊字符 使用kettle在抽取大量excel数据时.总是遇到excel中有一些特殊字符,导致ExecuteSQL script步骤运行失败,本文记录一些方 ...

  6. OpenCASCADE解非线性方程组

    OpenCASCADE解非线性方程组 eryar@163.com Abstract. 在科学技术领域里常常提出求解非线性方程组的问题,例如,用非线性函数拟合实验数据问题.非线性网络问题.几何上的曲线曲 ...

  7. vue中computed与watch的异同

    一.computed 和 watch   都可以观察页面的数据变化.当处理页面的数据变化时,我们有时候很容易滥用watch. 而通常更好的办法是使用computed属性,而不是命令是的watch回调. ...

  8. 关于css的入门知识

    css:叠层样式表,给html添加样式的 接下来说一说,在网页中如何嵌套style样式 1.行间样式:把style(*权重1000)作为属性卸载标签里 eg:<p style="col ...

  9. PHP生成二维码方法

    <?php //先下载一份phpqrcode类,下载地址http://down.51cto.com/data/780947require_once("phpqrcode/phpqrco ...

  10. 一个Web报表项目的性能分析和优化实践(七)：性能监测工具JavaMelody

    简介 JavaMelody 能够监测Java或Java EE应用程序服务器,并以图表的方式显示:Java内存和Java CPU使用情况,用户Session数量,JDBC连接数,和http请求.sql请 ...