rgba 和 opacity 的对比.

rgba 中的 a 指的是透明度:

1. rgba 的设置的透明度不会被子级元素继承; opacity 设置的透明度会被子级元素继承 .

　　因此 ,有时候使用 rgba 会比 opacity 效果更好;

2. rgba 可以设置background-color , color , border-color , text-shadow , box-shadow,

------------------------------

实例: 在一个背景上 ,设置一个子背景 ,这个子背景透明, 同时子背景中的内容不透明 .

1)使用 opacity .

 <!DOCTYPE html>

 <html lang="zh-CN">

 <head>

     <meta charset="UTF-8">

     <title>opaciyt</title>

     <style type="text/css">

          .bg-box {

            width: 200px;

            height: 200px;

            border: 1px solid #ccc;

            background: red;

            position: relative;

          }

          .bg {

            background: black;

            opacity: 0.5;

            filter:alpha(opacity=50);

            width: 100%;

            height: 100px;

            position: absolute;

            bottom: 0;

            left: 0;

            z-index: 1;

           }

           .bg-content {

             width: 100%;

             height: 100px;

             position: absolute;

             bottom: 0;

             left: 0;

             z-index: 10;

           }

           .bg-content p {

              padding: 5px 10px;

              color: white;

              font-size: 16px;

           }

     </style>

 </head>

 <body>

     <div class="bg-box">

       <div class="bg">  </div>

        <div class="bg-content">

           <p>我是bg的后代元素，我不想我的前景有任何透明!怎么办?</p>

         </div>

     </div>

 </body>

 </html>

这里是个 bg-content 的兄弟节点 bg 加上透明度 .

同时绝对定位 ,使得 bg 和 bg-content 重合 ;

同时 bg 的 z-index 要小于 bg-content 的 z-index , 使得 bg 在 bg-content 下面.

-----------

如果不是上面的那样 ,而是给 bg-content 的父级加上透明度 , 那么 bg-content 就会继承透明度, bg-content中的内容也会继承透明度. 这样就不是我们想要达到的效果了.

 <!DOCTYPE html>

 <html lang="zh-CN">

 <head>

     <meta charset="UTF-8">

     <title>opaciyt-2</title>

     <style type="text/css">

           .bg-box {

             width: 200px;

             height: 200px;

             border: 1px solid #ccc;

             background: red;

             position: relative;

           }

          .bg {

             background: black;

             opacity: 0.5;

             filter:alpha(opacity=50);

             width: 100%;

             height: 100px;

             position: absolute;

             bottom: 0;

             left: 0;

           }

           .bg p {

             padding: 5px 10px;

             color: white;

             font-size: 16px;

           }

     </style>

 </head>

 <body>

     <div class="bg-box">

       <div class="bg">

            <div class="bg-content">

           <p>我是bg的后代元素，我不想我的前景有任何透明!怎么办?</p>

         </div>

       </div>

     </div>

 </body>

 </html>

----------------

2) 使用 rgba . rgba 定义的透明度不会被继承;

 <!DOCTYPE html>

 <html lang="zh-CN">

 <head>

     <meta charset="UTF-8">

     <title>rgba</title>

     <style type="text/css">

           .bg-box {

              width: 200px;

              height: 200px;

              border: 1px solid #ccc;

              background: red;

              position: relative;

           }

           .bg-content {

              width: 100%;

              height: 100px;

              position: absolute;

              bottom: 0;

              left: 0;

              background: rgba(0, 0, 0,0.5);

           }

           .bg-content p{

              padding: 5px 10px;

              color: white;

              font-size: 16px;

           }

     </style>

 </head>

 <body>

     <div class="bg-box">

        <div class="bg-content">

           <p>我是bg的后代元素，我不想我的前景有任何透明!怎么办?</p>

         </div>

     </div>

 </body>

 </html>

-------------------------------------------------

定义的一个兼容的 rgba 类:

.rgba {

  background: rgb(0,0,0); /*The Fallback color,这里也可以使用一张图片来代替*/

  background: rgba(0, 0, 0,0.5);

  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr=#80000000,endColorstr=#80000000)"; /*Filter for IE8 */

  filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr=#80000000, endColorstr=#80000000); /*Filter for older IEs */

 }

css背景颜色属性值转换

参考链接:

　　CSS3 RGBA　　

　　RGBA与Opacity区别小解