在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. QIDO-RS - Search

    6.7.1 QIDO-RS - Search 6.7.1.1 Request The specific resources to be used for the search actions shal ...

  2. 【JavaScript从入门到精通】第四课初探JavaScript魅力-04

    第四课初探JavaScript魅力-04 style与className 之前我们已经讲过,style用于在JS里控制元素的样式,通过style可以选中元素的各种css属性.此外,我们也提到过,JS用 ...

  3. 17.翻译系列：将Fluent API的配置迁移到单独的类中【EF 6 Code-First系列】

    原文链接:https://www.entityframeworktutorial.net/code-first/move-configurations-to-seperate-class-in-cod ...

  4. Delphi Format 格式化数字

    Format('x=%d', [12]); //'x=12' //最普通Format('x=%3d', [12]); //'x= 12' //指定宽度Format('x=%f', [12.0]); / ...

  5. pandas DataFrame apply()函数(1)

    之前已经写过pandas DataFrame applymap()函数 还有pandas数组(pandas Series)-(5)apply方法自定义函数 pandas DataFrame 的 app ...

  6. 一分钟内搭建全web的API接口神器json-server详解

    JSON-Server 是一个 Node 模块,运行 Express 服务器,你可以指定一个 json 文件作为 api 的数据源. 安装json-server npm install -g json ...

  7. java语言的优缺点

    转载自:https://blog.csdn.net/bingshanyijiao_fkx/article/details/51613954 角度一: 优点:简单.安全.稳定.跨平台 缺点:需要运行环境 ...

  8. iptables转发技术

    NAT 一. 什么是 NAT NAT(Network Address Translation)译为网络地址转换.通常路由器在转发我们的数据包时,仅仅会将源MAC地址换成自己的MAC地址,但是NAT技术 ...

  9. comake2

    http://blog.csdn.net/lsjseu/article/details/23395565 comake允许用户通过编写COMAKE文件,来帮助用户管理编译依赖以及编译环境的开发工具: ...

  10. MySQL server has gone away

    场景: 批量写入数据时,MySQL server has gone away 解决方法: 在 my.ini 中 将 max_allowed_packet 参数设置大一点  show global va ...