提供Discuz ,ECShop ,PHPCMS ,帝国CMS ,CSS教程 ,PHP教程 ,DedeCMS ,WordPress ,HTML教程等cms问题查询.
当前位置: HTML教程 > rgba中的a是指什么?rgba怎样用【html5教程】,rgba怎么用,rgba中的a是什么

本篇文章给人人带来的内容是关于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网别的相干文章!

「梦想一旦被付诸行动,就会变得神圣,如果觉得我的文章对您有用,请帮助本站成长」

分享到:
赞(0) 打赏

支付宝扫一扫打赏

微信扫一扫打赏

上一篇:

下一篇:

相关推荐

0 条评论关于"rgba中的a是指什么?rgba怎样用【html5教程】,rgba怎么用,rgba中的a是什么"

最新评论

    暂无留言哦~~

博客简介

看古风美女插画Cos小姐姐,素材合集图集打包下载:炫龙网,好看二次元插画应有尽有,唯美小姐姐等你来。

友情链接

他们同样是一群网虫,却不是每天泡在网上游走在淘宝和网游之间、刷着本来就快要透支的信用卡。他们或许没有踏出国门一步,但同学却不局限在一国一校,而是遍及全球!申请交换友链

服务热线:
 

 QQ在线交流

 旺旺在线