<!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. 网络协议 4 - 交换机与 VLAN

    上一次,我们通过公司需求,认识了如何通过物理层和链路层组建一个公司局域网.今天,我们切换到复杂点的办公室场景.     在这个场景里,就不像在大学教室那样,搞几根网线,拉一拉,扯一扯就可以了.一个办公 ...

  2. Aix下查看内存命令

    1. 查看物理内存配置 # lsdev -Cc memory  查看配置的物理内存设备,下面为其输出示例:  L2cache0 Available L2 Cache   mem0 Available ...

  3. 威联通212P 在admin用户密码正确情况下仍然无法登录WEB页面解决办法

    *登录 telnet 执行以下语句: [~] # cp /etc/default_config/passwd /mnt/HDA_ROOT/.config/passwd[~] # cp /etc/def ...

  4. XML解析——SAX解析以及更方便的解析工具(JDOM、DOM4J)

    XML主要用于数据交换,HTML则用于显示. 相对于DOM的树形解析,SAX采用的是顺序解析,这种解析方法可以快速地读取XML数据的方式. SAX主要事件: No. 方法 类型 描述 1 public ...

  5. spring在web.xml中的配置

    在实际项目中spring的配置文件applicationcontext.xml是通过spring提供的加载机制,自动加载的容器中去,在web项目中,配置文件加载到web容器中进行解析,目前,sprin ...

  6. C++ 不输入回车就不结束输入的实现方法

    方法一 char mystr[128]; mystr[0] = '\0'; char c = getchar(); int i=0; while(c!='\n') { mystr[i] = c; c ...

  7. gvim window7 下提示乱码

    今天在win7下安装gvim的时候,发现所有的提示信息都是乱码的,在网上找到了如下的解决方案.在此记录下,方便以后查阅. 以下内容转载自http://blog.csdn.net/rehung/arch ...

  8. select选择框实现跳转

    select选择框实现跳转 零.启示 1.启示把bom里面的几个对象稍微有点印象,那么主干有了,学其它的就感觉添置加瓦,很简单 就是关注树木的主干 2.万能的百度,不过当然要你基础好学得多才能看得懂, ...

  9. HTTP基础知识整理

    http请求由三部分组成,分别是:请求行.消息报头.请求正文 HTTP(超文本传输协议)是一个基于请求与响应模式的.无状态的.应用层的协议,常基于TCP的连接方式,HTTP1.1版本中给出一种持续连接 ...

  10. Elasticsearch之需要注意的问题(es和jdk版本)

    (1)在使用java代码操作es集群的时候 要保证本地使用的es的版本和集群上es的版本保持一致.  (2)保证集群中每个节点的JDK版本和es基本配置一致 这个很简单,不多说.  (3)es集群中j ...