CSS3 RGBA

article/2025/10/1 8:11:09

转载自：http://www.w3cplus.com/content/css3-rgba

前面我们一起探讨了一下CSS3 Gradient（css3 渐变），今天我们一起来探讨一下CSS3中的RGBA。RGB对于大家来说一点不陌生，他就是红色R+绿色G+蓝色B，那现在我们所说的RGBA又是什么呢？说得简单一点就是在RGB的基础上加进了一个通道Alpha。从而形成了我们今天需要讨论的RGBA。如果需要更详细的解说，大家就跟着我一起往下看吧。

语法:

R：红色值。正整数 | 百分数

G：绿色值。正整数 | 百分数

B：蓝色值。正整数| 百分数

A：透明度。取值0~1之间

取值：

<length> ：Hue(色调)。 0(或360)表示红色，120表示绿色，240表示蓝色，当然可取其他数值来确定其它颜色；

<percentage> ：Saturation(饱和度)。 取值为0%到100%之间的值；

<percentage> ：Lightness(亮度)。 取值为0%到100%之间的值；

<opacity> ：alpha(透明度)。 取值在0到1之间；

说明：

RGB色彩模式（也翻译为“红绿蓝”，比较少用）是工业界的一种颜色标准，是通过对红(R)、绿(G)、蓝(B)三个颜色通道的变化以及它们相互之间的叠加来得到各式各样的颜色的，RGB即是代表红、绿、蓝三个通道的颜色，这个标准几乎包括了人类视力所能感知的所有颜色，是目前运用最广的颜色系统之一。

RGBA在RGB的基础上多了控制alpha透明度的参数。以上R、G、B三个参数，正整数值的取值范围为：0 - 255。百分数值的取值范围为：0.0% - 100.0%。超出范围的数值将被截至其最接近的取值极限。并非所有浏览器都支持使用百分数值。A参数，取值在0~1之间，不可为负值。

浏览器的兼容性：

如果庞统说rgba是制作透明色（透明背景色、透明边框色、透明前景色等），大家不由会想起opacity 这个东西。他在我们CSS2中制作背景色通常用到，可是要用他来制作边框色或都说前景色的话，那他就只能在边上站着了，有心无力呀。

现在我们先来看一个rgba和opacity的对比实例

HTML代码：

<div class="example-opacity"><p>Opacity效果</p><ul><li class="opacity opacity1">100%</li><li class="opacity opacity2">80%</li><li class="opacity opacity3">60%</li><li class="opacity opacity4">40%</li><li class="opacity opacity5">20%</li><li class="opacity opacity6">0</li></ul><p>CSS3的RGBA效果</p><ul><li class="rgba rgba1">1</li><li class="rgba rgba2">0.8</li><li class="rgba rgba3">0.6</li><li class="rgba rgba4">0.4</li><li class="rgba rgba5">0.2</li><li class="rgba rgba6">0</li></ul>
</div>

 

我们分别给这两上ul中的li应用相关样式， 在li.opacity中我用使用CSS2中的opacity而在li.rgba中我们使用CSS3的rgba新属性

Opacity样式

  li.opacity{float: left;width: 50px;height: 50px;}li.opacity1 {background: rgb(255,255,0);opacity: 1;filter:alpha(opacity=100);}li.opacity2 {background: rgb(255,255,0);opacity: 0.8;filter:alpha(opacity=80);}li.opacity3 {background: rgb(255,255,0);opacity: 0.6;filter:alpha(opacity=60);}li.opacity4 {background: rgb(255,255,0);opacity: 0.4;filter:alpha(opacity=40);}li.opacity5 {background: rgb(255,255,0);opacity: 0.2;filter:alpha(opacity=20);}li.opacity6 {background: rgb(255,255,0);opacity: 0;filter:alpha(opacity=0);}

 

RGBA样式

  li.rgba {float: left;width: 50px;height: 50px;}li.rgba1 {background: rgba(255,255,0,1);}li.rgba2 {background: rgba(255,255,0,0.8);}li.rgba3 {background: rgba(255,255,0,0.6);}li.rgba4 {background: rgba(255,255,0,0.4);}li.rgba5 {background: rgba(255,255,0,0.2);}li.rgba6 {background: rgba(255,255,0,0);}

 

我们来看看其效果：

效果中我们可以看出，他们相同之处就是背景色完全是一样的，但区别就是一直让大家觉得头痛的问题，那就是opacity后代元素会随着一起具有透明性，所以我们Opacity中的字随着透明值下降越来越看不清楚，而RGBA不具有这样的问题，但是其支持的浏览器中有一个占在大市场份额的IE不支持，这也就是让我们需要去做兼容，（听到兼容二字大家是不是特烦，我也是的）希望IE早点能实现。

在CSS2中Opacity能实现透明，而且大多主流浏览器都支持，虽然IE下有点麻烦

/* IE5 - 7 */
filter: alpha(opacity=80); 
/* IE 8 */
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; 
/* Everyone else */
opacity: 0.8;

 

那为什么不使用opacity而要使用rgba呢

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

在RGBA还没有出世前，我们都是使用opacity来做透明，但这里存在一个问题，就是我们在父元素中使用了opacity，那么其垢代元素都会受其影响，我想这个问题大家都有碰到过，为了解决这样的问题我们需要增加一个空的div来专门放置使用透明的背景，然后通过使用绝对定位来实现我们需要的结果。为了更好的理解我们在这里来看一个使用opacity的实例。首先来看html

<div class="bg-box"><div class="bg"><div class="bg-content"><p>我是bg的后代元素，我不想我的前景有任何透明!怎么办?</p></div></div>
</div>

 

先给他们附上相应的样式

  .bg-box {width: 200px;height: 100px;border: 1px solid #ccc;background: red;position: relative;}.bg {background: black;opacity: 0.5;filter:alpha(opacity=50);width: 100%;height: 50px;position: absolute;bottom: 0;left: 0;}.bg p {padding: 5px 10px;color: white;}

 

效果：

从效果中我们明显的看出，这里和我们前面那个例子一样，名叫bg的div中设置了opacity，造成其后代元素段落P的前景色也随着变了。如果需要解决这样的问题，在不使用别的新技术下，也就是说坚持使用opacity.那么我们就需要添加一个空的层，在这个地方应用透明背景层首先来看看改变一下html 结构吧

<div class="bg-box"><div class="bg">  </div><div class="bg-content"><p>我是bg的后代元素，我不想我的前景有任何透明!怎么办?</p></div>           
</div>

 

现在我们需要提把bg-content和bg层重合起来，换句话说就是把透明背景层单独放在另外一个div，然后把内容层和背景层重叠。换而言之，我们需要在bg这个div上设置透明色，而在bg-content这个div上放置内容，并且都使用定位，保证bg这个div在bg-content这个div下面。具体看看其CSS的变化：

 .bg-box {width: 200px;height: 100px;border: 1px solid #ccc;background: red;position: relative;}.bg {background: black;opacity: 0.5;filter:alpha(opacity=50);width: 100%;height: 50px;position: absolute;bottom: 0;left: 0;z-index: 1;}.bg-content {width: 100%;height: 50px;position: absolute;bottom: 0;left: 0;z-index: 10;}.bg-content p {padding: 5px 10px;color: white;}

 

首先我们在html中把bg这个div分离出来了，让他和bg-content这个div变成兄弟关系，然后通过CSS把他们都定位在同一位置，只是bg放在了bg-content的下面（z-index）控制，另外在bg的div上应用了透明。看看这样一来我们有什么变化，效果如下：

跟没有处理之前相比是不是完美多了。可是这样弄就是有一点麻烦，现在CSS3的RGBA完全可以帮大家解决这样的问题了，接着我们在看一个用RGBA制作的效果吧，看看他是不是完全一样的。

HTML代码：

<div class="bg-box"><div class="bg-content"><p>我是bg的后代元素，我不想我的前景有任何透明!怎么办?</p></div>           
</div>

 

我们只要在bg-content中应用一个background:rgba();就能有上面那种效果了，具体看看代码吧：

  .bg-box {width: 200px;height: 100px;border: 1px solid #ccc;background: red;position: relative;}.bg-content {width: 100%;height: 50px;position: absolute;bottom: 0;left: 0;background: rgba(0, 0, 0,0.5);}.bg-content p{padding: 5px 10px;color: white;}

 

效果：

从效果的对比中我们可以明显的看出，和opacity做出的效果是完全一样的。但是这里有一个问题是我们讨厌的IE（除IE9以外）都不支持CSS3的RGBA属性。那么这样我们在IE下不是什么都没有吗？回答是肯定的，虽然IE不支持但我们不能什么都不给他呀，这样一来我们就碰到一个新名词"fallback color",它的意思是我给IE备份一个色，在不支持RGBA的情况下，我照样给他一个色，而对rgba支持的浏览器并不会带来影响，那我们一起看看这个fallback color怎么用吧。其实很简单，我们可以给其制作一张图片或都只给其加一个色，我们这些就只加一个色吧拿前面的实例来说吧，我们只要把bg-content的样式换一下

  .bg-content {width: 100%;height: 50px;position: absolute;bottom: 0;left: 0;background: rgb(0,0,0); /*The Fallback color*/background: rgba(0, 0, 0,0.5);-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr=#80000000,endColorstr=#80000000)"; /*Filter for IE8 */    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr=#80000000, endColorstr=#80000000); /*Filter for older IEs */}

 :

这里需要注意的是startColorStr和endColorStr的值#80000000,其中前两位是十六进制的透明度80,也就是透明值为0.5而后面六位是十六进制的颜色#000000(black黑色)。如果你和我一样不知道怎么转换这个值，你可以采用下面这个工具：

CSS背景颜色属性值转换 有关于这个工具的使用大家可以点击志哥的《使用IE过渡滤镜和CSS3中的RGBA属性完成背景色透明效果》

关于RGBA-IE-FALLBACK更多的知识可点击这里进入.

综合上面的所述，我们规纳一个RGBA在实际应用中的模式

.rgba {background: rgb(0,0,0); /*The Fallback color,这里也可以使用一张图片来代替*/background: rgba(0, 0, 0,0.5);-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr=#80000000,endColorstr=#80000000)"; /*Filter for IE8 */    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr=#80000000, endColorstr=#80000000); /*Filter for older IEs */}

 

上面代码中的颜色值可以根据自己的需求修改，此处只是一个代表性的值。

我们前面简单的带过一句，我们rgba不单可以应用在background上，我们还可以应用在只要设置了颜色的地方都可以使用，我在这里简单的说一下几种：

第一种：前景色color

HTML

  <p class="norgba-color">用rgba改变我的字体颜色</p><p class="rgba-color">用rgba改变我的字体颜色</p>

 

CSS样式：

.norgba-color {color: rgb(255, 0, 0);
}  
.rgba-color {color: rgb(255, 0, 0);color: rgba(255, 0, 0,0.5);
}

 

效果：

第二种边框色border-color

HTML

<p class="norgba-border-color">用rgba改变我的边框颜色</p>
<p class="rgba-border-color">用rgba改变我的边框颜色</p>

 

CSS样式：

.norgba-border-color {border:5px solid rgb(255,0,0);width: 200px;
}  
.rgba-border-color {border:5px solid rgb(255,0,0);border:5px solid rgba(255,0,0,0.5);width: 200px;
}

 

效果：

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

HTML:

 <p class="norgba-text-shadow">用rgba改变我的字体阴影颜色</p><p class="rgba-text-shadow">用rgba改变我的字体阴影颜色</p>

 

CSS:

 .norgba-text-shadow {text-shadow : 0 2px 1px rgb(255,0,0);}.rgba-text-shadow {text-shadow : 0 2px 1px rgb(255,0,0);text-shadow : 0 2px 1px rgba(255,0,0,0.3);}

 

效果：

第四种改变边框阴影色

HTML:

 <p class="norgba-box-shadow">用rgba改变我的边框阴影颜色</p><p class="rgba-box-shadow">用rgba改变我的边框阴影颜色</p>

 

CSS:

  .norgba-box-shadow {border: 5px solid green;width: 200px;-webkit-box-shadow: 0 2px 2px rgb(255,0,0);-moz-box-shadow: 0 2px 2px rgb(255,0,0);box-shadow: 0 2px 2px rgb(255,0,0);}.rgba-box-shadow {border: 5px solid green;width: 200px;-webkit-box-shadow: 0 2px 2px rgba(255,0,0,0.6);-moz-box-shadow: 0 2px 2px rgba(255,0,0,0.6);box-shadow: 0 2px 2px rgba(255,0,0,0.6);}

 

效果:

最后一种就是渐变颜色,关于这个我就不在多说了，因为我们前面的CSS Gradient有说过个例子，感兴趣的朋友可以到这里去看看。

这里需要告诉大家的一点，这几种使用rgba的方法，目前只有在支持RGBA属性的浏览器才能正常显示，如果需要使用的朋友，请考虑这方面的显示差别。那么到这里关于CSS3的RGBA我就介绍完了，希望能给大家的学习带来一定的帮助，更希望志同道合的朋友一起探讨一起学习一起进步。



http://chatgpt.dhexx.cn/article/d0WTdFaO.shtml

相关文章

rgba的使用

rgba的使用

rgba有四个值&#xff0c;前三个值都是数字&#xff0c;用来调颜色&#xff0c;最后一个值表示透明度&#xff0c;值在0-1。 1表示不透明&#xff0c;0表示透明&#xff0c;0-1之间可以调整透明的程度 最后值为0时 <!DOCTYPE html> <html><head><meta ch…
阅读更多...
rgba无效php,rgba设置的背景透明没用啊

rgba无效php,rgba设置的背景透明没用啊

本来跟着老师的做的&#xff0c;设置了background-color: rgba(255,255,255,0.1);结果就成上边的样子了&#xff0c;求大神指导啊&#xff0c;啊啊啊啊.graySection .articlPreview .imgSection { width: 45%; } .imgSection img { width: 100%; } .graySection .articlPreview…
阅读更多...
html边框白色实线rgba,CSS3 RGBA 属性高级用法

html边框白色实线rgba,CSS3 RGBA 属性高级用法

这个属性的兼容问题比较简单&#xff0c;IE8已经支持这个属性&#xff0c;IE6和IE7也可以通过hack支持。RGBA和CSS2里的RBG属性差不多&#xff0c;只是RGBA属性多了一个透明度的定义&#xff0c;CSS3标准里对RGBA属性的解释如下&#xff1a; /* 基本语法 */em { color: Rgba(re…
阅读更多...
CSS中RGBA和渐变色

CSS中RGBA和渐变色

颜色值RGBA 我们熟悉的rgb颜色标准&#xff0c;是由r&#xff08;red&#xff09;、g&#xff08;green&#xff09;、b&#xff08;blue&#xff09;三种颜色叠加变化形成各种颜色 取值0-255&#xff0c;或0-100% rgba就是在rgb基础上增加了alpha不透明度参数 .demo {width…
阅读更多...
Drools入门介绍

Drools入门介绍

Drools 介绍 是一个业务规则管理系统&#xff0c;具有基于前向链和后向链推理的规则引擎&#xff0c;允许对业务规则和复杂事件处理进行快速可靠的评估。规则引擎也是创建专家系统的基本构建块&#xff0c;在人工智能中&#xff0c;专家系统是模拟人类专家决策能力的计算机系统…
阅读更多...
Drools入门系列

Drools入门系列

Drools入门系列&#xff08;一&#xff09;HelloWorldDrools入门系列&#xff08;二&#xff09;HelloWorld详解之Sample.drlDrools入门系列&#xff08;三&#xff09;HelloWorld详解之kmodule.xmlDrools入门系列&#xff08;四&#xff09;HelloWorld详解之JUnit Test类Drool…
阅读更多...
初探Drools

初探Drools

文章目录 背景一、Drools基本概念1.1 规则引擎1.2 Drools简介 二、Drools基本用法2.1 规则文件2.2 配置文件2.3 数据驱动 三、Drools进阶用法3.1 DSL语言3.2 其他 四、Workbench五、android端集成六、类比其他Java规则引擎七、应用场景与展望 背景 笔者最近在研究、使用Java规…
阅读更多...
Drools学习01

Drools学习01

Drools学习 1.springbootdroolsstringTemplate 1.1主要依赖导入 <!--使用drools的主要依赖--> <dependency><groupId>org.drools</groupId><artifactId>drools-compiler</artifactId><version>7.73.0.Final</version> <…
阅读更多...
Drools基础语法

Drools基础语法

Drools基础语法 规则文件构成 在使用Drools时非常重要的一个工作就是编写规则文件&#xff0c;通常规则文件的后缀为.drl。 drl是Drools Rule Language的缩写。在规则文件中编写具体的规则内容。 一套完整的规则文件内容构成如下&#xff1a; Drools支持的规则文件&#xff…
阅读更多...
【Drools一】值得打工人学习的规则引擎Drools

【Drools一】值得打工人学习的规则引擎Drools

本文主要对Drools的使用业务场景做简单介绍。 规则引擎 规则引擎&#xff1a;全称为业务规则管理系统&#xff0c;英文名为BRMS(即Business Rule Management System)。规则引擎的主要思想是将应用程序中的业务决策部分分离出来&#xff0c;并使用预定义的语义模块编写业务决策…
阅读更多...
Drools 入门例子

Drools 入门例子

本人参照drools-4.0.7-examples修改&#xff0c;可以到这个网址去下载&#xff1a;http://www.jboss.org/drools/downloads.html 1:下载4.0版eclipse &#xff1a; eclipse-java-ganymede-win32.zip并解压到D:/eclipse-java-ganymede-win32不需安装 2:下载drools插件 http://ww…
阅读更多...
Drools

Drools

Drools入门系列&#xff08;一&#xff09;HelloWorldDrools入门系列&#xff08;二&#xff09;HelloWorld详解之Sample.drlDrools入门系列&#xff08;三&#xff09;HelloWorld详解之kmodule.xmlDrools入门系列&#xff08;四&#xff09;HelloWorld详解之JUnit Test类Drool…
阅读更多...
规则引擎 Drools

规则引擎 Drools

规则引擎 Drools 文章目录 规则引擎 Drools1. 问题引出2. 规则引擎概述2.1 什么是规则引擎2.2 使用规则引擎的优势2.3 规则引擎应用场景2.4 Drools介绍 3.Drools入门案例3.1 业务场景说明3.2 开发实现3.3 小结3.3.1 规则引擎构成3.3.2 相关概念说明3.3.3 规则引擎执行过程3.3.4…
阅读更多...
drools学习

drools学习

drools使用和设置 1.概述举个例子 2.结合maven引入1.引入maven2.创建kmoudule.xml文件3如有需要,安装drools的插件4编写drl规则文件5准备用于测试的po类6编写drools的java接口 3.基本规则 4.组合语法 1.概述 drools是一个规则引擎,什么是规则引擎?就是能够自动将决策树转化为…
阅读更多...
drools详解

drools详解

1、基本的概念 请参考这个链接&#xff0c;差不多的语法感觉都介绍了 drools-api的基本语法链接 2、如何将drl文件配置在数据库中&#xff0c;实现动态加载&#xff1a; package com.neo.drools;import com.neo.drools.model.Message; import org.kie.api.io.ResourceType; i…
阅读更多...
Drools基本介绍，入门案例，基本语法

Drools基本介绍，入门案例，基本语法

目录 经典需求与场景 需求 传统做法-if 传统做法-策略 问题&#xff1f; 规则引擎 概念 起源 原理--基于 rete 算法的规则引擎 规则引擎应用场景 Drools 介绍 消费赠送积分案例 第一步&#xff1a; 创建工程&#xff0c;引入jar 创建 drools 自动配置类 订单实体…
阅读更多...
Drools 简介

Drools 简介

序 现实生活中&#xff0c;规则无处不在。对于某些企业级应用&#xff0c;诸如欺诈检测软件&#xff0c;购物车&#xff0c;活动监视器&#xff0c;信用和保密应用之类的系统&#xff0c;经常会有大量的、错综复杂的业务规则配置&#xff0c;而且随着企业管理者的决策变化&…
阅读更多...
drools 介绍

drools 介绍

1 .场景 1.1需求 商城系统消费赠送积分 100元以下, 不加分 100元-500元 加100分 500元-1000元 加500分 1000元 以上 加1000分 ...... 1.2传统做法 1.2.1 if...else if (order.getAmout() < 100){ order.setScore(0); addScore(order); }else if(order.getAmo…
阅读更多...
计组——定点数原码反码补码移码以及它们之间的转换

计组——定点数原码反码补码移码以及它们之间的转换

原码 用尾数表示真值的绝对值&#xff0c;符号位“0/1”对应“正/负” 若机器字长n1位&#xff0c;原码整数的表示范围&#xff1a; − ( 2 n − 1 ) ≤ x ≤ 2 n − 1 {\color{Red} -(2^{n}-1)\leq x\leq 2^{n}-1} −(2n−1)≤x≤2n−1&#xff08;关于原点对称&#xff09;…
阅读更多...
数据的表示：原码、反码、补码、移码以及浮点数的运算

数据的表示：原码、反码、补码、移码以及浮点数的运算

前言 复习到数据表示方面相关的知识&#xff0c;所以在这里做一下记录&#xff0c;也方便大家参考。 什么是 R 进制 对于 R 机制&#xff0c;如果要实现与十进制的转换&#xff0c;则使用 按权展开法&#xff0c;其具体操作为&#xff1a; 将 R 进制数的每一位数值用 R k R…
阅读更多...
推荐文章

Copyright @ 2022~2023