文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

CSS3中rgb与rgba的含义

2023-06-08 02:42

关注

这篇“CSS3中rgb与rgba的含义”除了程序员外大部分人都不太理解,今天小编为了让大家更加理解“CSS3中rgb与rgba的含义”,给大家总结了以下内容,具有一定借鉴价值,内容详细步骤清晰,细节处理妥当,希望大家通过这篇文章有所收获,下面让我们一起来看看具体内容吧。

rgb与rgba的含义

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

基本语法:
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与rgba的含义

RGBA的兼容:

CSS3中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的区别

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与rgba的含义

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

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与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与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与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与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与rgba的含义

总结

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

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

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

感谢你的阅读,希望你对“CSS3中rgb与rgba的含义”这一关键问题有了一定的理解,具体使用情况还需要大家自己动手实验使用过才能领会,快去试试吧,如果想阅读更多相关知识点的文章,欢迎关注编程网行业资讯频道!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯