opacity和rgba的区别

opacity和rgba都是css中设置透明度的方式。

文章目录

    • opacity属性
    • rbga属性值
    • opacity和rgba的区别

opacity属性

opacity 属性设置元素的不透明级别。

语法:

opacity: value|inherit;
描述
value value 规定不透明度。从 0.0 (完全透明)到 1.0(完全不透明)
inherit 应该从父元素继承 opacity 属性的值。

opacity和rgba的区别_第1张图片


rbga属性值

rgba() 函数使用红( R)、绿(G)、蓝(B)、透明度(A)的叠加来生成各式各样的颜色。
语法:

rgba(red, green, blue, alpha)
描述
red 定义红色值,取值范围为 0 ~ 255,也可以使用百分比 0% ~ 100%。
green 定义绿色值,取值范围为 0 ~ 255,也可以使用百分比 0% ~ 100%。
blue 定义蓝色值,取值范围为 0 ~ 255,也可以使用百分比 0% ~ 100%。
alpha - 透明度 定义透明度 0(完全透明) ~ 1(完全不透明)

opacity和rgba的区别

  1. opacity
    opacity是一个属性。opacity属性的值,可以被其子元素继承,给父级div设置opacity属性,那么所有子元素都会继承这个属性,并且,该元素及其继承该属性的所有子元素的所有内容透明度都会改变。
  2. rgba
    rgba是一个属性值。rgba设置的元素,只对该元素的背景色有改变,并且,该元素的后代不会继承该属性。

opacity和rgba的区别_第2张图片

你可能感兴趣的:(前端零零散散,css3,css,html)