作者:WangMin

格言:努力做好自己喜欢的每一件事

对于颜色相信大家都很敏感,眼睛所见之处都存在颜色,那在css中我们用什么来表示颜色呢?CSS 中的颜色有三种定义方式:使用颜色方法(RGB、RGBA、HSL、HSLA),十六进制颜色值和预定义的颜色名称。我们常使用的是RGB与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的兼容:



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
}



从上面的例子中我们可以看出随着透明度的变化,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);
}



从上面的例子中我们可以看出随着透明度的变化,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)
}



第二种:边框色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)
}

第三种:字体的阴影色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) ;
}



第四种:改变边框阴影色

<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) ;
}

总结

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

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

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


以上仅是个人见解,若有不足之处欢迎在下方评论指出,那就先分享到这里!! 后续继续更新!!

CSS3 rgb and rgba(透明色)的使用的更多相关文章

  1. RGB以及RGBA

    字母含义及取值 R:红色.0~255 整数 G:绿色.0~255 整数 B:蓝色.0~255 整数 A:透明度.0~1.整数或者小数 RGB和RGBA的关系 项目遇见一个需求,后台返回所占比例,前端根 ...

  2. css3新特性@rgba

    1.rgba也经常在实际应用中使用,它主要是在原来rgb的基础上添加了一透明度.但是他又和opacity又有一些差别,主要体现在对子元素的透明度的影响上. 例如:使用opacity和backgroun ...

  3. 【CSS3】---颜色RGBA及渐变色

    颜色之RGBA RGB是一种色彩标准,是由红(R).绿(G).蓝(B)的变化以及相互叠加来得到各式各样的颜色.RGBA是在RGB的基础上增加了控制alpha透明度的参数. 语法: color:rgba ...

  4. ARGB与RGB、RGBA的区别

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

  5. CSS3 渐变,rgba与hsla

    radial-gradient:径向渐变 ellipse:椭圆形渐变默认,circle:圆形渐变 定义渐变大小,指定终点位置: farthest-corner:默认,指定径向渐变的半径长度为:从圆心到 ...

  6. 制作透明色:《CSS3 RGBA》与Opacity样式用法

    前面我们一起探讨了一下CSS3 Gradient(css3 渐变),今天我们一起来探讨一下CSS3中的RGBA.RGB对于大家来说一点不陌生,他就是红色R+绿色G+蓝色B,那现在我们所说的RGBA又是 ...

  7. RGBa颜色 css3的Alpha通道支持

    CSS3中,RGBa 为颜色声明添加Alpha通道. RGB值被指定使用3个8位无符号整数(0 – 255)并分别代表红色.蓝色.和绿色.增加的一个alpha通道并不是一个颜色通道——它只是用来指定除 ...

  8. CSS3新增Hsl、Hsla、Rgba色彩模式以及透明属性(转)

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

  9. 使用IE滤镜实现css3中rgba让背景色透明的效果

    让背景透明,听上去不是挺容易的么? 让背景色透明,很容易想到opacity,要兼容IE的话只要加上filter:alpha(opacity=?)就行了,OK,看看这个例子. html: <div ...

  10. rgb & rgba convert

    rgb & rgba convert RGB color to Hex, Pantone, RAL, HSL, HSV, HSB, JSON. Get color scheme. https: ...

随机推荐

  1. 包管理工具npm和Yarn的区别,我们该如何选择?

    好家伙,学习新工具    1.为什么我们需要包管理器? 关于npm我们已经知道了,这是我们项目的包管理器, 我们现在用的无比顺手的工具,都是在无数的竞争中杀出来的,他们淘汰了无数的产品   首先,倘若 ...

  2. [C#]WPF 分辨率的无关性的问题

    什么是WPF的分辨率无关性? 首先得解什么是Dpi(Density independent pixels ,设备无关像素),百度百科的解释DPI是指每英寸的像素,对应界面显示即是屏幕上每英寸的像素. ...

  3. PyQt5实时刷新

    对于执行很耗时的程序来说,由于PyQt需要等待程序执行完毕才能进行下一步,这个过程表现在界面上就是卡顿,而如果需要执行这个耗时程序时不断的刷新界面.那么就可以使用QApplication.proces ...

  4. 需求太多处理不过来?MoSCoW模型帮你

    一.MoSCoW模型是什么 MoSCoW模型是在项目管理.软件开发中使用的一种排序优先级的方法,以便开发人员.产品经理.客户对每个需求交付的重要性达成共识. MoSCoW是一个首字母缩略词,代表: M ...

  5. 三维模型OSGB格式轻量化的数据压缩与性能平衡分析

    三维模型OSGB格式轻量化的数据压缩与性能平衡分析 在三维模型应用中,OSGB格式轻量化处理是一种常见的技术手段,它可以通过数据压缩.简化.滤波等操作,降低三维模型数据的存储空间和传输带宽需求,提高应 ...

  6. Mysql高阶自定义排序

    Mysql高阶自定义排序 嗨,大家好,我是远码,隔三岔五给大家分享一点工作的技术总结,花费的时间不多,几分钟就行,谢谢! Mysql对我们码农来说是在熟悉不过的日常了,就不在介绍它的基础用法了,今天我 ...

  7. FastDFS入门

    一.系统架构 二.构成部分 1.Tracker Server:跟踪服务器,记录文件信息,可单台或集群部署. 2.Storage Server:存储服务器,文件存储位置,分卷或分组部署. 3.Clien ...

  8. [htmlayout] flow布局

    css { flow:xxxx.... } flow: vertical --------------------- 默认值, 块元素的所有子元素从上到下. flow: horizontal ---- ...

  9. 记录一个令人崩溃的tomcat闪退问题

    tomcat启动时要加载server.xml文件,xml文件中的注释符要一一对应不能多不能少. 比如 这就是错的 只有这样 才是对的 呜呜呜~~~

  10. SpringBoot使用@Async注解8大坑点

    前言 SpringBoot中,@Async注解可以实现异步线程调用,用法简单,体验舒适. 但是你一定碰到过异步调用不生效的情况,今天,我就列出90%的人都可能会遇到的8大坑点. 正文 1.未启用异步支 ...