•   欢迎来到21NN网.
  •   请记住本站网址www.21nn.cn

rgba中的a是指什么?rgba怎样用【html5教程】,rgba怎么用,rgba中的a是什么

摘要: 本篇文章给人人带来的内容是关于rgba中的a是指什么?rgba怎样用,有肯定的参考价值,有须要的朋侪能够参考一下,愿望对你有所协助。RGBA颜色RGB是一种颜色规范,是由红(R)、绿(G)...
本篇文章给人人带来的内容是关于rgba中的a是指什么?rgba怎样用,有肯定的参考价值,有须要的朋侪能够参考一下,愿望对你有所协助。

RGBA颜色

RGB是一种颜色规范,是由红(R)、绿(G)、蓝(B)的变化以及互相叠加来获得形形色色的颜色。RGBA说白了,就是在RGB的基础上加了一个透明度通道Alpha。

语法:

rgba(R,G,B,A)

申明:

R:赤色值(Red);

G:绿色值(Green);

B:蓝色值(Blue);

A:透明度(Alpha);

R、G、B三个参数能够为正整数,也能够为百分比。正整数值的取值局限为0~255,百分数值的取值局限为0.0%~100.0%。超出局限的数值将被停止其最接近的取值极限。并不是一切浏览器都支撑运用百分数值。

参数A为透明度,相似opacity属性,取值局限在0.0~1.0之间,不可为负值。下面是RGBA颜色的准确用法:

rgba(255,255,0,0.5)
rgba(50%,80%,50%,0.5)

举例:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head> 
    <title>CSS3 RGBA颜色</title>
    <style type="text/css">
        *{padding:0;margin:0;}
        ul
        {
            display:inline-block;
            list-style-type:none;
            width:200px;
        }
        li
        {
            height:30px;
            line-height:30px;
            font-size:20px;
            font-weight:bold;
            text-align:center;
        }
        /*第1个li*/
        li:first-child
        {
            background-color:#FF00FF;
        }
        /*第2个li*/
        li:nth-child(2)
        {
            background-color:rgba(255,0,255,0.5);
        }
        /*第3个li*/
        li:last-child
        {
            background-color:#FF00FF;
            opacity:0.5;
        } 
    </style>
</head>
<body>
    <ul>
        <li>ki4网</li>
        <li>ki4网</li>
        <li>ki4网</li>
    </ul>
</body>
</html>

结果以下:

剖析:

十六进制颜色值#FF00FF等价于rgb(255,0,255)。第1个li元素没有运用RGBA颜色值,也没有运用透明度opacity属性;第2个li元素运用RGBA颜色值;第3个li元素运用透明度opacity属性。

人人能够清楚地看出,假如我们对某个元素运用透明度opacity属性,则该元素的内容以及子元素都邑受到影响。

从上面的例子我们晓得,关于设置元素的透明度,RGBA比透明度opacity属性更好,由于RGBA不会影响元素中的内容以及子元素的不透明度。

以上就是对rgba中的a是指什么?rgba怎样用的悉数引见,假如您想相识更多有关CSS3教程,请关注ki4网。

以上就是rgba中的a是指什么?rgba怎样用的细致内容,更多请关注ki4网别的相干文章!

分享到:

发表评论

评论列表

还没有评论,快来说点什么吧~

公众号二维码

微信公众号