CSS笔记14：透明度（opacity）

1. opacity

• opacity透明度
  opacity:number;
  其中，number为0-1之间的浮点数，用来表示元素的透明度
  0完全透明，1-完全不透明
  不仅对颜色有效，对图像或页面中其他的元素也有效

---

• 注意

1. 子元素拥有相同的透明度

---

• 实现效果
  image.png

---

rgba

    <style>
    /*
    只要是颜色，都可以使用透明度
    rgba(红色, 绿色, 蓝色, 透明度)
    a:代表透明度，取值0-1,0表示完全透明，1表示不透明;
     */
    div div{
        height:100px;
        width:200px;
        /*margin:10px auto;*/
        border:1px solid rgba(255,100,100,0.5);
    }
    .box div:first-child{
        background-color: rgba(255,100,100,0.5);
        position:fixed;/*覆盖标准文档流*/

    }
    </style>

颜色透明度效果
注：适用于文本颜色透明、背景颜色透明度、边框颜色透明度等颜色

---

参考

1. http://c.biancheng.net/css3/opacity.html