在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. CentOS7+Hadoop2.7.2(HA高可用+Federation联邦)+Hive1.2.1+Spark2.1.0 完全分布式集群安装

    1 2 2.1 2.2 2.3 2.4 2.5 2.6 2.7 2.8 2.9 2.9.1 2.9.2 2.9.2.1 2.9.2.2 2.9.3 2.9.3.1 2.9.3.2 2.9.3.3 2. ...

  2. hql里面union和union all的区别

    union和union all的区别是,union会自动压缩多个结果集合中的重复结果,而union all则将所有的结果全部显示出来,不管是不是重复. 注意,原来表里面的重复行也会被压缩. Union ...

  3. MSSQL 调用C#程序集 实现C#字符串到字符的转化

    10多年前用过MSSQL 调用C#程序集来实现数据的加密和解密,也搞过通过字符偏移实现简单的加密和解密.这次就总结一下吧: C#如下: public class CLRFunctions { /// ...

  4. C++异常处理解析: 异常的引发(throw), 捕获(try catch)、异常安全

    前言: C++的异常处理机制是用于将运行时错误检测和错误处理功能分离的一 种机制(符合高内聚低耦合的软件工程设计要求),  这里主要总结一下C++异常处理的基础知识, 包括基本的如何引发异常(使用th ...

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

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

  6. Unable to find a @SpringBootConfiguration, you need to use @ContextConfiguration or @SpringBootTest(classes=...) with your test java.lang.IllegalStateException

    不能找到对应的带有@SpringBootConfiguration 的类,你需要将它放在包的最顶层.

  7. failed to create process怎么解决

    python 在cmd时,报错:failed to create process怎么解决 在cmd命令前加 : python -m 命令(如:python -m conda update conda)

  8. webstorm快捷键 webstorm keymap内置快捷键英文翻译、中英对照说明

    20160114参考网络上的快捷键,整理自己常用的: 查找/代替shift+shift 快速搜索所有文件,简便ctrl+shift+N 通过文件名快速查找工程内的文件(必记)ctrl+shift+al ...

  9. 安装APK失败，错误代码：INSTALL_FAILED_INVALID_APK 解决方案

    错误代码:installation failed with message failed to finalize session:INSTALL_FAILED_INVALID_APK 解决方法如下:

  10. 转-编写CGI小结

    由于Carl要用到我的程序,我们便合作工作.但是他写的程序是Python的,我写的程序是Java的,必须得找一种方式进行通信.尽管有Jython这些东西,但是Carl认为还是CGI最简便.于是,前阵子 ...