css基础--深入理解opacity和rgba的区别

首先这两个都与透明度有关，那么他们之间有什么具体的区别呢？在实际工作中我们需要注意什么呢？请您接着往下看

首先它是一个属性值，语法为rgba（r,g,b,a）

// 例子：

.box1{

    // 不限于背景颜色，可以是文字颜色，阴影等

     background: rgba(0,0,255,0.4);

}

opacity是一个属性，而非一个属性值，语法为：

opacity: value|inherit;

value:不透明度，从 0.0 （完全透明）到 1.0（完全不透明）

//例子

.box2{

     background: rgb(0,0,255);

     opacity:0.4;

}

//部分代码

.box1{

     background: rgba(0,0,255,0.4);

}

.box2{

     background: rgb(0,0,255);

     opacity:0.4;

}

我们从效果图中不难看出，

如果您对我的博客内容有疑惑或质疑的地方，请在下方评论区留言，或邮件给我，共同学习进步。

邮箱：wuxiaolong802@163.com

巴特西