由于IE-8及以下都不支持 RGBA(),所以往往大家都不用这个属性,而是用图层叠加的方式去实现我们想要的效果。因为 opacity 这个属性是会影响到子孙元素的。

例如:

<div class="bg-box">
<div class="bg"> </div>
<div class="bg-content">
<p>我是bg的后代元素,我是模拟出来的颜色,我不会继承我的父级,因为我在兄弟节点在一起呀在一起!</p>
</div>
</div>

RGBA在RGB的基础上多了控制alpha透明度的参数。以上R、G、B三个参数,正整数值的取值范围为:0 - 255。百分数值的取值范围为:0.0% - 100.0%。超出范围的数值将被截至其最接近的取值极限。并非所有浏览器都支持使用百分数值。A参数,取值在0~1之间,不可为负值。

参考网址A

CSS-3 RGBA的使用的更多相关文章

  1. CSS技巧-rgba函数的妙用

    先简单介绍一下: rgba()函数是平时开发中经常遇到的,这篇文章也做了一个比较详细的解读以及一系列的应用. 对它的工作原理做一番分析:就是具有一定透明度的盒子: 还比较了rgba()函数和不透明度属 ...

  2. CSS中RGBA的兼容方法以及透明度计算方法

    CSS对IE使用背景透明 实现 rgba 效果 height:35px; background: -webkit-gradient(linear,left top,left bottom,from(r ...

  3. LODOP打印css样式rgba显示黑色区块

    当LODOP打印html超文本出现问题的时候,要删减排查一下样式,查看Lodop传入的内部的html超文本和样式,可查看本博客另一篇博文:删减发现有问题的样式,并解决该问题,尽量使用通用的css样式, ...

  4. css使用rgba()或hsla()设置半透明或完全透明边框border

    在css中我们想实现透明颜色,首先就会想到rgba()和hsla()这2个属性.这篇文章就简单介绍下使用这2种方式来实现半透明边框. 1.使用rgba方式: border: 10px solid rg ...

  5. 使用fliter实现ie下css中rgba的效果

    直接举例吧background-color: rgba(255,255,255,0.8); 设置背景颜色为白色,不透明度设为80% 在ie下可以用fliter这一属性进行设置: filter:prog ...

  6. css 基础 rgba表示法

    color:rgba(); //r表示red 红色 //g表示green 绿色 //b表示blue 蓝色 //a 表示透明度 color:rgb(0,0,0,0) //黑色 color:rgb(255 ...

  7. 兼容性背景颜色半透明CSS代码(不影响内部子元素)

    如何简单兼容性的实现父元素是半透明背景色,而子元素不受影响. 兼容所有浏览器的背景颜色半透明CSS代码: background-color: rgba(, , , .); filter: progid ...

  8. css透明属性

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

  9. 使用IE滤镜实现css3中rgba让背景色透明的效果

    让背景透明,听上去不是挺容易的么? 让背景色透明,很容易想到opacity,要兼容IE的话只要加上filter:alpha(opacity=?)就行了,OK,看看这个例子. html: <div ...

  10. 前端——CSS

    CSS CSS是英文Cascading Style Sheets的缩写,称为层叠样式表,用于对页面进行美化. 存在方式有三种:元素内联.页面嵌入和外部导入,比较三种方式的优缺点. 语法:style = ...

随机推荐

  1. PS官方正式中文版(搬砖分享)

    https://pan.baidu.com/s/1c3IdQq0 PS官方正式中文版(搬砖分享) 注意事项: 1.安装开始前请先断网,在成功破解激活前请全程断网: 2.安装完成后先试运行软件一次,然后 ...

  2. 三丰云使用记录--部署iis服务器

     写在前面的话:看在我这么热心写使用推广记录,麻烦延长下使用天数,谢谢 官网地址:https://www.sanfengyun.com 三丰云是北京太极三丰云计算有限公司旗下网络服务品牌,十八年IDC ...

  3. Fabric Dev开发调试模式的搭建过程

    在利用Fabric开发Chaincode的时候,调试Chaincode显得尤为不方便,因为Chaincode正常应该运行在Docker容器中,每次修改Chaincode后想要使其更改生效必须得对Cha ...

  4. openssl证书及配置

    我的环境是:Linux+Apache+MySQL+PHP 1.下载openssl 及相关依赖 #yum install -y openssl 2.进入目录 /etc/pki/tls/certs #cd ...

  5. PAT甲题题解-1049. Counting Ones-数学问题

    n位数,总共有0~10^n-1共计10^n个数那么所有数出现的总次数变为n*(10^n)个数1出现的次数便是十分之一,所以n位数中,1出现的次数为n*10^(n-1)知道这一个后,接下来就方便求了. ...

  6. Java实验报告(实验一)

    课程:Java程序设计          班级: 1351 姓名:王玮怡                学号:20135116 成绩:             指导教师:娄嘉鹏       实验日期: ...

  7. 每日scrum(2)

    今天是冲刺的第二天,小组主要做了界面的美化,加入了软件的开始动画,以及学校景点的美图介绍: 主要的问题在于除了开始界面,进入软件之后还是有待改进,功能的呈现有待加强. 任务看板: 燃尽图: 会议照片:

  8. Github: 团队账号:https://github.com/ChenRuTing

    Github: 团队账号:https://github.com/ChenRuTing 以后我们做好的代码会随时更新上传到这里,请老师届时帮我们看看.谢谢老师.

  9. Ubuntu 14.04 installation & bugs on Alienware-13

    列一下Alienware 13笔记本配置: Processor: Intel Core 5th Generation i5-5200U Processor (3M Cache, up to 2.70 ...

  10. 基于 ARM的 Windows 10S 笔记本 转帖

    首款骁龙笔记本华硕畅370评测:续航不俗 性能拖后腿 2018年06月21日 12:23 新浪数码 缩小字体放大字体收藏微博微信分享   相关阅读:国内首款骁龙本华硕畅370发布:6199元送一年无限 ...