CSS3 rgb and rgba(透明色)的使用详解


Posted in HTML / CSS onSeptember 25, 2020

对于颜色相信大家都很敏感,眼睛所见之处都存在颜色,那在css中我们用什么来表示颜色呢?CSS 中的颜色有三种定义方式:使用颜色方法(RGB、RGBA、HSL、HSLA),十六进制颜色值和预定义的颜色名称。我们常使用的是RGB与RGBA。那我们就来说一下它们之间的区别吧!

CSS3 rgb and rgba(透明色)的使用详解

rgb与rgba的含义

RGB 是代表Red(红色) 、Green(绿色)、 Blue(蓝色)三个单词的缩写。RGBA 颜色值是 RGB 颜色值的扩展,添加了一个 alpha 通道, 它规定了对象的不透明度。

1、 基本语法:
R:红色值。 正整数(0~255)或 百分数(0.0% - 100.0%)
G:绿色值。 正整数(0~255)或 百分数(0.0% - 100.0%)
B:蓝色值。 正整数(0~255)或 百分数(0.0% - 100.0%)
A:透明度。取值0~1之间,不可为负值

RGB颜色值查找可参考:https://www.sioe.cn/yingyong/yanse-rgb-16/(css中也可用十六进制来表示各种颜色,在这个网站也可查找到各种颜色的十六进制值)。

2、浏览器的兼容性:

RGB的兼容:

CSS3 rgb and rgba(透明色)的使用详解

RGBA的兼容:

CSS3 rgb and rgba(透明色)的使用详解

http://caniuse.com/ 可以在这个网站查找你所要用的属性在浏览器中的兼容问题。

3、rgb与rgba的书写格式

rgb的书写格式:rgb(90,50,25);

其中第一个数字(90)表示Red 颜色(红色值),第二个数字(50)表示Green 颜色(绿色值),第三个数字(25)表示Blue 颜色(蓝色值)。数字越大(不超过255)则表示其对应的颜色加的越多。

rgba的书写格式:rgba(90,50,25,0.5);

从上面我们可以得到 RGBA 颜色值是 RGB 颜色值的扩展,添加了一个 alpha 通道, 它规定了对象的不透明度。前面三个数值跟 rgb表示的是一样的,a 的值为0~1之间的值,0表示透明色,1表示不透明,0.5表示每个(R、G、B)颜色50%的透明度,也就是每个颜色半透明状态。这里的a还可以简写成 .5,这里只要是有小数点的透明度,都可以这样简写。

rgb与rgba的区别

1、rgb+opacity(IE下不兼容)
因为rgba中的 a 表示对象的透明度,所以这里利用 opacity 属性(也表示透明度)+ rgb来说明一下rgb与rgba的区别。opacity 属性还可以用 filter 属性来表示,例如:filter:Alpha(opacity=50),这里的50表示的50%的透明度。例子如下:

<div class="box">
	<p>rgb+opacity:</p>
	<div class='one'>25%</div>
	<div class='two'>50%</div>
	<div class='three'>75%</div>
	<div class='four'>100%</div>
</div>
.box{
	margin-bottom: 10px;
	overflow: hidden;	
}
.box>div{
	width:100px;
	height:100px;
	float: left;
}
.box>div{
	background:rgb(255,0,0)
}
.box>.one{
	opacity:.25;
}
.box>.two{
	opacity:.5;
}
.box>.three{
	opacity:.75;
}
.box>.four{
	opacity:1
}

CSS3 rgb and rgba(透明色)的使用详解

从上面的例子中我们可以看出随着透明度的变化,div 会具有透明性,div 上的文本也会随之具有透明度,越来越看不清。

2、rgba

因为rgba中的 a 表示对象的透明度,所以这里可以直接利用background搭配rgba来说明透明这个问题。例子如下:

<div class="box1">
	<p>rgba</p>
	<div class='one'>25%</div>
	<div class='two'>50%</div>
	<div class='three'>75%</div>
	<div class='four'>100%</div>
</div>

```css
.box1>div{
	width:100px;
	height:100px;
	float: left;
}
.box1>.one{
	background:rgba(255,0,0,1);
}
.box1>.two{
	background:rgba(255,0,0,.75);
}
.box1>.three{
	background:rgba(255,0,0,.5);
}
.box1>.four{
	background:rgba(255,0,0,.25);
}

CSS3 rgb and rgba(透明色)的使用详解

从上面的例子中我们可以看出随着透明度的变化,div 会具有透明性,div 上的文本并没有受到透明度的影响,保持着文本的自身颜色。

RGBA 不单可以应用在 background 上,我们还可以应用在只要设置了颜色的地方都可以使用,在这里简单的说一下几种:

第一种:字体颜色,设置颜色的同时可以设置透明度。

<p class="p1">字体颜色</p>
<p class="p2">字体颜色</p>
.p1{
	color:rgb(255,0,0)
}
.p2{
	color:rgba(255,0,0,.5)
}

CSS3 rgb and rgba(透明色)的使用详解

第二种:边框色border-color

<div class="div3"></div>
<div class="div4"></div>
.div3,.div4{
	width:100px;
	height:100px;
	background:#f00;
}
.div3{
	border:5px solid rgb(0,0,0)
}
.div4{
	border:5px solid rgba(0,0,0,.2)
}

CSS3 rgb and rgba(透明色)的使用详解

第三种:字体的阴影色text-shadow

<p class="p1">字体阴影颜色</p>
<p class="p2">字体阴影颜色</p>
.p1{
	text-shadow:1px 2px 1px rgb(255,0,0) ;
}
.p2{
	text-shadow:1px 2px 1px rgba(255,0,0,.5) ;
}

CSS3 rgb and rgba(透明色)的使用详解

第四种:改变边框阴影色

<div class="div3"></div>
<div class="div4"></div>
.div3,.div4{
	width:100px;
	height:100px;
	background:#000;
}
.div3{
	box-shadow: 1px 5px 5px rgb(255,0,0);
	margin-bottom: 20px;
}
.div4{
	box-shadow: 1px 5px 5px rgba(255,0,0,.5) ;
}

CSS3 rgb and rgba(透明色)的使用详解

总结

1、从我们上面的实例中我们也知道,RGBA 比元素设置 CSS 的透明度更好,因为单独的颜色可以在不影响整个元素的透明度,他不会影响到元素其他的属性,比如说边框,字体同时也不会影响到其他元素的相关透明度。

2、使用 Opacity 来做透明,在父元素中使用了 Opacity,那么其它子元素都会受到影响。

3、最后需要告诉大家的一点, RGBA 这种方法,目前只有在支持 RGBA 属性的浏览器才能正常显示。

到此这篇关于CSS3 rgb and rgba(透明色)的使用详解的文章就介绍到这了,更多相关CSS3 rgb and rgba内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

HTML / CSS 相关文章推荐
CSS3弹性盒模型开发笔记(三)
Apr 26 HTML / CSS
css3背景_动力节点Java学院整理
Jul 11 HTML / CSS
html5+css3之制作header实例与更新
Dec 21 HTML / CSS
html5指南-2.如何操作document metadata
Jan 07 HTML / CSS
HTML5本地存储localStorage、sessionStorage基本用法、遍历操作、异常处理等
May 08 HTML / CSS
HTML5学习笔记之History API
Feb 26 HTML / CSS
HTML5中原生的右键菜单创建方法
Jun 28 HTML / CSS
浅谈Html5多线程开发之WebWorkers
May 02 HTML / CSS
Html5跳转到APP指定页面的实现
Jan 14 HTML / CSS
h5页面唤起app如果没安装就跳转下载(iOS和Android)
Jun 03 HTML / CSS
h5页面背景图很长要有滚动条滑动效果的实现
Jan 27 HTML / CSS
HTML基本元素标签介绍
Feb 28 HTML / CSS
详解CSS3弹性伸缩盒
Sep 21 #HTML / CSS
CSS3 实现雷达扫描图的示例代码
Sep 21 #HTML / CSS
详解css3 flex弹性盒自动铺满写法
Sep 17 #HTML / CSS
Css3实现无缝滚动防抖
Sep 14 #HTML / CSS
CSS3 border-radius圆角的实现方法及用法详解
Sep 14 #HTML / CSS
详解css3中dispaly的Grid布局与Flex布局
Sep 11 #HTML / CSS
CSS3动画和HTML5新特性详解
Aug 31 #HTML / CSS
You might like
PHP静态新闻列表自动生成代码
2007/06/14 PHP
PHP安全技术之 实现php基本安全
2010/09/04 PHP
在Mac上编译安装PHP7的开发环境
2015/07/28 PHP
Laravel框架自定义公共函数的引入操作示例
2019/04/16 PHP
thinkPHP3.2使用RBAC实现权限管理的实现
2019/08/27 PHP
Jquery index()方法 获取相应元素索引值
2012/10/12 Javascript
showModalDialog模态对话框的使用详解以及浏览器兼容
2014/01/11 Javascript
js实现鼠标点击文本框自动选中内容的方法
2015/08/20 Javascript
jQuery validate插件实现ajax验证重复的2种方法
2016/01/22 Javascript
JS字符串的切分用法实例
2016/02/22 Javascript
深入理解JS中的Function.prototype.bind()方法
2016/10/11 Javascript
理解nodejs的stream和pipe机制的原理和实现
2017/08/12 NodeJs
Node.js实现连接mysql数据库功能示例
2017/09/15 Javascript
利用Decorator如何控制Koa路由详解
2018/06/26 Javascript
详解vue 图片上传功能
2019/04/30 Javascript
详解ES6 Promise的生命周期和创建
2019/08/18 Javascript
详解Vue 换肤方案验证
2019/08/28 Javascript
vue项目中使用bpmn-自定义platter的示例代码
2020/05/11 Javascript
python使用urlparse分析网址中域名的方法
2015/04/15 Python
Python实现的飞速中文网小说下载脚本
2015/04/23 Python
简单谈谈python中的Queue与多进程
2016/08/25 Python
Python爬虫动态ip代理防止被封的方法
2019/07/07 Python
python爬虫添加请求头代码实例
2019/12/28 Python
Python 判断时间是否在时间区间内的实例
2020/05/16 Python
欧洲最大的滑雪假期供应商之一:Sunweb Holidays
2018/01/06 全球购物
Priority Pass机场贵宾室会籍计划:全球超过1200间机场贵宾室
2018/08/26 全球购物
令人啧啧称赞的经理推荐信
2013/11/07 职场文书
英语道歉信范文
2014/01/09 职场文书
勾股定理课后反思
2014/04/26 职场文书
教师工作总结范文2014
2014/11/10 职场文书
捐书活动倡议书
2015/04/27 职场文书
Go 实现英尺和米的简单单位换算方式
2021/04/29 Golang
JavaScript实现简单拖拽效果
2021/09/15 Javascript
十大最强岩石系宝可梦,怪颚龙实力最强,第七破坏力很强
2022/03/18 日漫
六个好看实用的 HTML + CSS 后台登录入口页面
2022/04/28 HTML / CSS
Mybatis 一级缓存和二级缓存原理区别
2022/09/23 Java/Android