天使爱美丽

“TA还未设置签名”

笔记

CSS学习之opacity和rgba属性的区别详解

已有 112 次阅读2018-04-10 17:40 |系统分类:前端优化 |

本文和大家分享的主要是css中与透明度有关的两个属性opacityrgba,主要围绕这两个css属性的区别和注意事项来说,希望对大家学习css有所帮助。

  语法

  1. rgba

  首先它是一个属性值,语法为rgbar,g,b,a

  - r为红色值, 正整数 百分数

  - g为绿色值,正整数 百分数

  - b为蓝色值,正整数 百分数

  - aalpha(透明度),值为0 ~ 1之间的小数, 0.0 (完全透明)到 1.0(完全不透明)

  上面的正整数为十进制0 ~ 255之间的任意值,百分数为0% ~ 100%之间的任意值

  // 例子:.box1{

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

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

  }

  2. opacity

  opacity是一个属性,而非一个属性值,语法为 :

  opacity: value|inherit;

  value:不透明度,从 0.0 (完全透明)到 1.0(完全不透明)

  //例子.box2{

  background: rgb(0,0,255);

  opacity:0.4;

  }

  不同之处

  · opacity属性的所有后代元素都会继承 opacity 属性,而RGBA后代元素不会继承不透明属性

  · 看看下面效果:

  //部分代码.box1{

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

  }.box2{

  background: rgb(0,0,255);

  opacity:0.4;

  }


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

  - rgba只是背景颜色有透明效果

  而有opacity属性元素的后代都会继承这个透明属性,包括但不限于文字图片等

来源:网络


标签: 举报

收藏 0人收藏
给个赞0人点赞
评论
0 /300