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>
颜色可根据调色板自行调色
注:
原文作者:祈澈姑娘技术博客:https://www.jianshu.com/u/05f416aefbe1
90后前端妹子,爱编程,爱运营,爱折腾。
坚持总结工作中遇到的技术问题,坚持记录工作中所所思所见,欢迎大家一起探讨交流。
关注「编程微刊」公众号 ,在微信后台回复「领取资源」,获取IT资源300G干货大全。
公众号回复“1”,拉你进程序员技术讨论群.
css实现背景半透明文字不透明的效果的更多相关文章
- [小技巧]兼容IE6的纯CSS背景半透明文字不透明
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 兼容IE、Firefox的背景半透明内容不透明设置
首先要说明的是背景是内容的祖先元素.如果是兄弟节点那就没有必要记录这篇文章了. 记录一下,知其然也知其所以然. IE8-特点: 1.不支持"opcity:0.5;"这种写法,只支持 ...
- DIV背景半透明文字不半透明的样式
DIV背景半透明,DIV中的字不半透明 代码如下:<body bgcolor="#336699"> <div style="filter:alpha(o ...
- div半透明背景,文字不透明
background: rgba(255, 255, 255, 0.8) !important; /* IE无效,FF有效 */ background: #fff; filter: alpha(opa ...
- JS实现背景透明度可变,文字不透明的效果
最近项目里需要实现这么个功能,类似网游中的聊天框,背景都是透明的,但是文字是不透明.所以如果简单的使用opacity(非IE)和alpha滤镜(IE)是无法实现这个效果的,会造成全部透明. 解决办法如 ...
- CSS 实现背景半透明
IE过渡滤镜 + CSS3 rgba 即可完美实现. 具体实现代码如下: .transparent { background:rgba(0, 0, 0, 0.3); filter:pr ...
- 利用animate.css和es6制作文字向上滚动的效果
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <link rel= ...
- CSS实现背景透明而背景上的文字不透明完美解决
在我们设计制作一些网页的时候可能会用到半透明的效果,首先我们可能会想到用PNG图片处理,当然这是一个不错的办法,唯一的兼容性问题就是ie6 下的BUG,但这也不困难,加上一段js处理就行了.但假如我们 ...
- CSS实现背景透明/半透明效果的方法
全透明代码:{background:transparent} 半透明代码:{filter:alpha(opacity=80);-moz-opacity:0.8;width:auto !importan ...
随机推荐
- Coderfroces 864 D. Make a Permutation!
D. Make a Permutation! Ivan has an array consisting of n elements. Each of the elements is an intege ...
- 整个shuffle的流程图
整个shuffle的流程图 Paste_Image.png Map Shuffle的作用以及相应的设置 partition 过程:输入的<key,value>对经过map()处理后输出 ...
- AIX 软件包结构
AIX installp软件包结构 1. usr部分 2. / (root)部分 3. share部分 AIX 为了实现在客户机 / 服务器环境下安装的灵活性将安装包划分为 usr 部分 .r ...
- 如何把本地的项目推送到github上面去
前题:本地已经建好了项目,但电脑上没有安装git (windows 系统) 1.首页从网上下载git 并安装. 2.进入项目所在的文件夹,右键鼠标 3.新建.gitignore文件 touch .g ...
- perl编程问题
一.Hash类型 1.hash遍历输出:如果hash遍历输出的时候不是按key则会按数组输出. my %hash=(); ${hash}{"a"}="1"; $ ...
- CSUOJ 1525 Algebraic Teamwork
Problem A Algebraic Teamwork The great pioneers of group theory and linear algebra want to cooperate ...
- java设计模式--事件监听器模式(观察者模式)
这两个模式实质上很简单,在实际项目中也是非常常用的.但却被有些人说的云里雾里,这里用白话解释一下. 本质上两者都是同一个模式.专业的说法是这样的(觉得绕口的请直接转到白话解释部分,再回头来看下面这几句 ...
- C - The C Answer (2nd Edition) - Exercise 1-4
/* Write a program to print the corresponding Celsius to Fahrenheit table. */ #include <stdio.h&g ...
- openfire 开发遇到的些问题
openfire的 jid 账户名 + '@" + 你的域名 可是当你的账户名中 有大拼音的 时候 就会变成小写 比如 Test , jid = tes ...
- vim 常用插件功能跟配置
在之前的公司,一直是使用别人配置好的vim 环境,他当时配置的功能很强大,查看源码的时候,非常的方便.至少我一直都是用它来看源码,从来没有使用过source insight.现在换了工作,但之前养成的 ...