李涛自留地
回到顶部
首页 > 前端 > RGBA是什么是干啥用的？RGBA如何使用实例

RGBA是什么是干啥用的？RGBA如何使用实例

文章目录

RGBA是我们在网页制作的Css页面层叠样式表中经常会遇到的一个属性，对于RGBA是什么是啥用的？可能一些才接触网页制作或者是前端的朋友，可能还不知道或者是不明白RGBA的作用和用法，那么本文将从RGBA是什么、RGBA怎么用、RGBA的应用场景、RGBA一个使用实例来记载在页面制作中如何使用RGBA的属性。

一、RGBA是什么?

一些朋友可能听说过或者是明白RGB是什么意思，会photoshop或者是其他绘图工具的朋友可能明白RGB就是Red（红色）、Green（绿色）、Blue（蓝色）三种颜色的混合在一起的缩写，我们现实生活中所有的颜色全部都是由这三种基础颜色混合而成，RGBA只比RGB多了一个A，这个A就是Alpha的缩写，翻译过来就是透明度的意思，说到这里我们大致就明白了RGBA到底是什么了，说简单点的意思就是可以改变我们RGB颜色透明度的一种属性，下面我们来看看在网页制作中RGBA参数有哪些又如何使用？

二、RGBA参数有哪些又如何使用？

1、GBGA的参数说明：

RGBA在网页设置中，就是代表了4个参数：

R：代表一种颜色的红色部分的值是多少，值的区间为0到255；

G：代表一种颜色的绿色部分的值是多少，值的区间为0到255；

B：代表一种颜色的蓝色部分的值是多少，值的区间为0到255；

A：代表的是这个颜色的透明度是多少，默认是100%，可以设置为百分数也可以写出小数；

2、GBGA在Css中如何使用：

background-color: rgba(255, 0, 0, 50%);
RGBA是什么是干啥用的？RGBA如何使用实例

上面的代码以页面的背景颜色为例，R的值是255，G的值是0，B的值也是0，说明是红色，在上图中我们在photoshop的背景颜色中将R、G、B的而A的值设置为255、0、0之后，可以发现确实是纯红色。在上面的代码块中R的值是255，G的值是0，B的值也是0，A的值是50%，A的值我们可以写成百分数，也可以写成小数，我们甚至还可以将50%写成.5，在CSS中一样会被正确识别，而以上代码块中使用的RGBA最后就代表的是全红色的半透明的颜色。同理，如果R的值是0，G的值是255，B的值也是0，那么这个颜色就是纯绿色，那个值的颜色最大就偏向那种颜色。

三、RGBA的应用场景

1、背景颜色

RGBA在网页设计中，大部分使用在背景颜色中，常见的网页的header头部背景颜色、body背景颜色、图片中的遮罩效果等等，大部分的网页设置和前端开发中都会使用在背景颜色。

2、颜色渐变

比较常见的就是背景颜色的颜色渐变，在某一大的选择器中，使用一种同一种颜色，使用RGBA设置为两个不同的透明度，做一个背景颜色渐变的效果，这样两种颜色看上去十分的接近却又有所不同，在视觉效果上也更加的美观和好看。

四、RGBA颜色使用实例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>rgba颜色使用实例</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: Verdana, Geneva, Tahoma, sans-serif;
            font-size: 16px;
            color: #333;
        }

        h3 {
            padding: 15px;
        }

        .header {
            height: 90px;
            background-color: rgba(255, 0, 0);
            color: #fff;
            text-align: center;
        }

        .main {
            height: 600px;
            background-color: rgba(255, 0, 0, 50%);
            color: #fff;
            text-align: center;
        }
    </style>

</head>

<body>
    <header class="header">
        <h3>网页头部部分：全红色透明度100%</h3>
    </header>
    <main class="main">
        <h3>网页主体部分:红色背景颜色半透明</h3>
    </main>
</body>

</html>

RGBA颜色使用实例效果图：

RGBA是什么是干啥用的？RGBA如何使用实例

以上实例中，我使用rgba属性设置一样的颜色，一个没有设置透明度rgba是三个值，一个设置了透明度rgba是四个值，可以看出没有设置透明度的就是红色，而设置了透明度的就是红色半透明。当我们使用RGBA设置为三个值的时候，这个时候A透明度的值其实是默认的100%，只有我们将RGBA设置为4个值，设置A的值的时候，这个时候才会改变透明度。

以上就是RGBA是什么是啥用的以及RGBA如何使用实例的全文，本文通过对RGBA是什么？RGBA参数有哪些又如何使用？RGBA的应用场景及RGBA颜色使用的一个实例，理论联系实践又非常详细的记载了RGBA的使用方法，希望看完本文后会对网友有所帮助。

若非作者标注皆为李涛自留地原创文章，转载或复制请以超链接形式并注明出处。