CSS rgba怎么用,设置颜色透明度

rgba设置颜色透明度语法

rgba( red, green, blue, percent)

其中参数red、green、blue为红绿蓝三原色的值,大小为0~255,percent为百分比,表示透明度,比如50%,也可以用小数点来表示0.5。


rgba使用方法,实例代码及在线编辑器

下方的实例代码中,设计了一个div,并根据absolute相对父元素的定位方式和z-index的设置将段落p覆盖,这样可以更清晰地了解rgba透明度的效果:

<div>
<p style='text-align:center;z-index:888;'>这是底层的段落</p>
<div id='d'></div>
</div>
<style>
  #d{z-index:889;background-color:rgba(150,200,200,0.8);width:100%;height:100%;position:absolute;top:0;left:0}
</style>

实例代码解析

如上代码,运行之后,可以修改rgba中的a值,比如该成80%,或0.2及其它的数值,来观察透明度的变化。



全栈前端 / CSS教程 :



























Copyright © 2022-2024 笨鸟工具 x1y1z1.com All Rights Reserved.