RGBA是一种颜色表示方法，其中R、G、B分别代表红、绿、蓝三个颜色通道，A代表透明度

Bol5261

已于 2024-04-09 21:07:59 修改

阅读量7.3k

点赞数

分类专栏： HTML5(HyperText Markup) Job(a good job programmer) CSS(Cascading Style Sheets) 文章标签： css html css3 类抽象类

于 2020-06-30 08:14:37 首次发布

本文链接：https://blog.csdn.net/blog_programb/article/details/107032752

版权

Job(a good job programmer) 同时被 3 个专栏收录

2049 篇文章 7 订阅

订阅专栏

HTML5(HyperText Markup)

302 篇文章 14 订阅

订阅专栏

CSS(Cascading Style Sheets)

141 篇文章 0 订阅

订阅专栏

RGBA是一种颜色表示方法，其中R、G、B分别代表红、绿、蓝三个颜色通道，A代表透明度。在HTML5中，可以使用CSS的rgba()函数来实现RGBA半透明效果。

例如，下面的代码将创建一个红色的半透明矩形：

<!DOCTYPE html>
<html>
<head>
<style>
.rectangle {
  width: 200px;
  height: 100px;
  background-color: rgba(255, 0, 0, 0.5);
}
</style>
</head>
<body>

<div class="rectangle"></div>

</body>
</html>

在这个例子中，rgba(255, 0, 0, 0.5)表示红色（R=255，G=0，B=0）和50%的透明度（A=0.5）。

CSS 中的颜色有三种定义方式：使用颜色方法（RGB、RGBA、HSL、HSLA），十六进制颜色值和预定义的颜色名称。
RGBA 是代表Red（红色） Green（绿色） Blue（蓝色）和 Alpha（不透明度）三个单词的缩写。RGBA 颜色值是 RGB
颜色值的扩展，带有一个 alpha 通道 - 它规定了对象的不透明度。
基本语法:
　　R：红色值。正整数（0~255）
　　G：绿色值。正整数（0~255）
　　B：蓝色值。正整数（0~255）
　　A：透明度。取值0~1之间
浏览器的兼容性：
RGBA 颜色值得到以下浏览器的支持：IE9+、Firefox 3+、Chrome、Safari 以及 Opera 10+。

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>RGBA半透明效果</title>
<style type="text/css">
ul {
	list-style:none;
	margin:10px;
	padding:0;
	background:url(../images/charactor.png) 10px 0 no-repeat;
}
li {height:20px;}
li:nth-child(1) {background:rgba(255, 153, 0, 0.1);}
li:nth-child(2) {background:rgba(255, 153, 0, 0.2);}
li:nth-child(3) {background:rgba(255, 153, 0, 0.3);}
li:nth-child(4) {background:rgba(255, 153, 0, 0.4);}
li:nth-child(5) {background:rgba(255, 153, 0, 0.5);}
li:nth-child(6) {background:rgba(255, 153, 0, 0.6);}
li:nth-child(7) {background:rgba(255, 153, 0, 0.7);}
li:nth-child(8) {background:rgba(255, 153, 0, 0.8);}
li:nth-child(9) {background:rgba(255, 153, 0, 0.9);}
li:nth-child(10) {background:rgba(255, 153, 0, 1);}
</style>
<body>
<ul>
  <li></li><li></li><li></li><li></li><li></li>
  <li></li><li></li><li></li><li></li><li></li>
</ul>
</body>
</html>