在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. Docker学习笔记1 -- 刚入手docker时的几个命令

    目录 Hello World 后台运行 停止运行 容器 载入镜像 指定端口映射 查看日志 查看应用的进程 登入镜像内部 移除容器 镜像 查看本地镜像 拉取镜像 查找镜像 更新镜像 构建镜像 设置镜像标 ...

  2. jquery监测文本框变化

    $("#mobile").on('keyup paste blur', function () {            var mobile = $(this).val();   ...

  3. SpringBoot2.x使用EasyPOI导入Excel浅谈

    SpringBoot2.x使用EasyPOI导入Excel浅谈 平时经常遇到客户要帮忙导入一些数据到数据库中,有些数据比较多有时候手动录入就会很耗时间,所以就自己写一个Excel导入的demo记录一下 ...

  4. Linux内核剖析（四）为arm内核构建源码树

    前面说到要做linux底层开发或者编写Linux的驱动,必须建立内核源码树,之前我们提到过在本机上构建源码树—-Linux内核剖析(三),其建立的源码树是针对i686平台的,但是我么嵌入式系统用的是a ...

  5. CentOS 7.5 安装KVM虚拟机(Linux)

    1.认识理解KVM虚拟机 Kernel-based Virtual Machine的简称,是一个开源的系统虚拟化模块,自Linux 2.6.20之后集成在Linux的各个主要发行版本中.它使用Linu ...

  6. 文档大师 在Win10 IE11下，文档集画面无法正常显示Word等Office文档的解决方法

    在文档集界面中显示Word文档,是文档大师的一个核心功能. 最近在 Win10 升级到最新版后,发现 无法正常显示Office 文档的问题. 一开始以为是Word版本问题,从2007升级到2016,问 ...

  7. mysql知识汇总

    一.数据类型介绍 数据类型 字节长度 范围或用法 bigint 8 无符号[0,2^64-1],有符号[-2^63 ,2^63 -1] binary(M) M 类似Char的二进制存储,只包含byte ...

  8. C语言 · 数字黑洞

    算法提高 数字黑洞   时间限制:1.0s   内存限制:256.0MB      问题描述 任意一个四位数,只要它们各个位上的数字是不全相同的,就有这样的规律: 1)将组成该四位数的四个数字由大到小 ...

  9. F3D模式规则详解

    F3D有两个版本,长期版还有短期版 长期版规则 1.购买时候分配 第一队 20% to 奖金池, 56%分给所有人, 30% 持有p3d的人第二队 35% to 奖金池, 43%分给所有人, 8% 持 ...

  10. SQL 性能分析

    SELECT s2.dbid, s1.sql_handle, (SELECT TOP SUBSTRING(s2.text,statement_start_offset / + , ( (CASE WH ...