在CSS3里可以使用RGBA和HSLA两种色彩模式，都可以用来在设置颜色的同时也可以设置它的透明度。RGBA指的是“红色、绿色、蓝色和Alpha透明度”（Red-Green-Blue-Alpha），而HSLA则代表“色调、饱和度、亮度和Alpha透明度”（Hue-Saturation-Lightness-Alpha）。

在RGBA模式里，前三个参数分别是红色、绿色和蓝色的强度值，取值从0~255或0%-100%。而在HSLA模式里，前三个参数则分别代表色调（0-360）、饱和度（0%-100%）和亮度（0%-100%）。透明度的取值从0（完全透明）到1（完全不透明）

1
2
hsla(182, 44%, 76%, .5);  
rgba(166, 218, 220, .5);

针对IE的兼容：IE8及之前的版本不支持HSLA/RGBA，但有以下备选方案：

  1. 为这些浏览器指定HEX、RGB或HSL格式的不透明背景

  2. 将一小张半透明PNG图片平铺作为背景图（但会增加一次HTTP请求，而且IE6不支持Alpha透明PNG图片）

  3. 使用Gradient（渐变）滤镜

    当然还有一个工具，输入值后自动转化为对应的滤镜值。

css hsla和rgba的区别的更多相关文章

  1. css基础--深入理解opacity和rgba的区别

    欢迎访问我的个人博客:http://www.xiaolongwu.cn 前言 首先这两个都与透明度有关,那么他们之间有什么具体的区别呢?在实际工作中我们需要注意什么呢?请您接着往下看 语法 1. rg ...

  2. css颜色模式hsla和rgba

    在CSS3中可以使用RGBA和HSLA两种色彩模式,这两个都可以用来设置颜色以及指定透明度. rgba指的是:红色.绿色.蓝色.Alpha透明度(Red-Green-Blue-Alpha)前三个值取值 ...

  3. css中使用rgba和opacity设置透明度的区别

    1.使用rgba设置背景色的透明 效果如下: <body> <div id="box"> 你好啊! </div> </body> b ...

  4. CSS3新增Hsl、Hsla、Rgba色彩模式以及透明属性（转）

    CSS2中色彩模式只有RGB色彩模式(RGB即RED.Green.BLue)和十六进制(Hex)模式,为了能支持 透明opacity 的Alpha值,CSS3又增加了RGBA色彩模式(RGBA即RED ...

  5. css行级块级区别总结摘录

    一.块级元素:block element 每个块级元素默认占一行高度,一行内添加一个块级元素后无法一般无法添加其他元素(float浮动后除外).两个块级元素连续编辑时,会在页面自动换行显示.块级元素一 ...

  6. 详解 $().css('width')和$().width()的区别

    在本次项目开发中,经常用jquery获取高度和宽度并且动态加载,有时候用$().css('width')或$().width()这两个方法获取宽度并设置,但是有时候出现获取不到的情况,查阅资料后发现他 ...

  7. ARGB与RGB、RGBA的区别

    ARGB 是一种色彩模式,也就是RGB色彩模式附加上Alpha(透明度)通道,常见于32位位图的存储结构. RGB 色彩模式是工业界的一种颜色标准,是通过对红(R).绿(G).蓝(B)三个颜色通道的变 ...

  8. css 兼容ie8 rgba()用法

    今天遇到了一个问题,要在一个页面中设置一个半透明的白色div.这个貌似不是难题,只需要给这个div设置如下的属性即可: background: rgba(255,255,255,.1); 但是要兼容到 ...

  9. CSS中em,rem的区别

    首先这两个单位一般用在移动端 不太清楚得求证  再记录 1.em w3cschool中给出css中尺寸单位如下: 单位 描述 % 百分比 in 英寸 cm 厘米 mm 毫米 em 1em 等于当前的字 ...

随机推荐

  1. 中国大学MOOC-陈越、何钦铭-数据结构-2017春

    中国大学MOOC-陈越.何钦铭-数据结构-2017春 学习地址 详细学习内容 Github记录地址 欢迎fork和star,有惊喜值得学习! 参考学习笔记 参考AC代码 数据结构和算法学习笔记 学习内 ...

  2. [转]jQuery中clone和clone（true）的区别

    jquery中clone() 和 clone(true)的区别. jquery复制 DOM的时候,原来还可以连 dom上面绑定的事件一起复制. 原文: https://www.cnblogs.com/ ...

  3. 国内阿里maven仓库镜像maven配置文件maven仓库速度快

    国内连接maven官方的仓库更新依赖库,网速一般很慢,收集一些国内快速的maven仓库镜像以备用. 最新更新:2016年11月11日 18:05:40 阿里云提供Maven私服,我把配置文件贴一下,自 ...

  4. Win10系统的SurfacePro4如何重装系统-3 重装完成之后的系统优化

    重装完成之后,还是有很多问题,比如触摸屏的驱动没了,你要接上去鼠标之后操作   由于Surface只有一个USB口,你接了鼠标,就没法接键盘,所以要开启屏幕的软键盘,右击任务栏,勾选显示触摸键盘按钮, ...

  5. react diff 原理

    (1) 把树形结构按照层级分解,只比较同级元素.(2) 列表结构的每个单元添加唯一的 key 属性,方便比较.(3) React 只会匹配相同 class 的 component(这里面的 class ...

  6. iframe相关小结

    父页面调用子页面方法, 子页面加载父页面传送的数据记录了父子间的调用和数据加载. 以下是另一些关于iframe的小结: 1:document.getElementById("ii" ...

  7. python - Linux C调用Python 函数

    1.Python脚本,名称为py_add.py def add(a=,b=): print('Function of python called!') print('a = ',a) print('b ...

  8. MySQL技术内幕读书笔记（五）——索引与算法

    索引与算法 INNODB存储引擎索引概述 ​ INNODB存储引擎支持以下几种常见的索引: B+树索引 全文索引 哈希索引 ​ InnoDB存储引擎支持的哈希索引是自适应的.会根据表的情况自动添加 ​ ...

  9. Netty学习(八)-Netty的心跳机制

    版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/a953713428/article/details/69378412我们知道在TCP长连接或者Web ...

  10. Quartz与Spring Boot集成使用

    上次自己搭建Quartz已经是几年前的事了,这次项目中需要定时任务,需要支持集群部署,想到比较轻量级的定时任务框架就是Quartz,于是来一波. 版本说明 通过搜索引擎很容易找到其官网,来到Docum ...