css3的设置颜色透明度的笔记

2019独角兽企业重金招聘Python工程师标准>>>

1.transparent的用法：在color、border-color、background的场景，意思为透明。只会是元素的背景色为透明的，元素里面的其他元素或内容都没有影响。

例子：

<div class="box">
        <p>111111</p>
    </div>

.box{
            width: 200px;
            height: 200px;
            background: transparent; /*设置不透明度，背景发生改变,字体不变*/
            color: red;  /*字体颜色*/
 }

2.opacity的用法：设置元素的不透明级别，从 0.0 （完全透明）到 1.0（完全不透明） 在使用opacity时，不仅使得元素的背景透明，连其子元素和内容都会变透明。也就是说背景和字体颜色同时发生改变。

例子:

<div class="box">
        <p>111111</p>
 </div>

.box{
            width: 200px;
            height: 200px;
            background: green;  /*背景颜色*/
            opacity: .5; /*设置不透明度，背景和字体颜色也发生改变*/
            color: red;  /*字体颜色*/
 }

3.rgba是代表Red（红色） Green（绿色） Blue（蓝色）和 Alpha（不透明度）三个单词的缩写。RGBA 颜色值是 RGB 颜色值的扩展，带有一个 alpha 通道 - 它规定了对象的不透明度。这里仅仅是背景透明了，框内的文字并没有继承该属性。也就是说设置不透明度，背景发生改变,字体不变。

例子：

<div class="box">
        <p>111111</p>
  </div>

.box{
            width: 200px;
            height: 200px;
            background: rgba(100,150,200,.5); /*设置不透明度，背景发生改变,字体不变*/
            color: red;  /*字体颜色*/
 }

 

转载于:https://my.oschina.net/u/3887849/blog/1840733