不透明的问题是，它也会影响内容，而这通常是你不希望发生的。

如果你只是想让你的元素是透明的，这真的很简单:

background-color: transparent;

但是如果你想让它有颜色，你可以使用:

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

或者定义一个背景图像(1px * 1px)，用右边的alpha值保存。 (要做到这一点，使用Gimp, Paint。Net或任何其他图像软件可以让你做到这一点。 只需创建一个新图像，删除背景，并在其中添加半透明的颜色，然后将其保存为png格式。)

正如René所说，最好的办法是两者混合，先用rgba，如果浏览器不支持alpha, 1px * 1px的图像作为备用:

background: url('img/red_transparent_background.png');
background: rgba(255, 0, 0, 0.4);

参见:http://www.w3schools.com/cssref/css_colors_legal.asp。

演示:我的JSFiddle

透明是默认的背景色

http://www.w3schools.com/cssref/pr_background-color.asp

不透明度给你半透明或透明。在这里看一个例子。

-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";       /* IE 8 */
filter: alpha(opacity=50);  /* IE 5-7 */
-moz-opacity: 0.5;          /* Netscape */
-khtml-opacity: 0.5;        /* Safari 1.x */
opacity: 0.5;               /* Good browsers */

注意:这些不是CSS3属性

参见http://css-tricks.com/snippets/css/cross-browser-opacity/

使用像这样的东西

<div style='background-color: rgba(0, 0, 0, 0.4);'>

这设置了div的背景色为黑色，但也有40%的透明度。 这不会改变div透明度的文本或内容。

现在讨论可能有点晚了，但不可避免地会有人像我一样偶然发现这篇文章。我找到了我一直在寻找的答案，我想我应该发表我自己的看法。 下面的jsp文件包括了如何将. png文件透明地分层。Jerska提到的div的CSS透明属性是解决方案: http://jsfiddle.net/jyef3fqr/

HTML:

   <button id="toggle-box">toggle</button>
   <div id="box" style="display:none;" ><img src="x"></div>
   <button id="toggle-box2">toggle</button>
   <div id="box2" style="display:none;"><img src="xx"></div>
   <button id="toggle-box3">toggle</button>
   <div id="box3" style="display:none;" ><img src="xxx"></div>

CSS:

#box {
background-color: #ffffff;
height:400px;
width: 1200px;
position: absolute;
top:30px;
z-index:1;
}
#box2 {
background-color: #ffffff;
height:400px;
width: 1200px;
position: absolute;
top:30px;
z-index:2;
background-color : transparent;
      }
      #box3 {
background-color: #ffffff;
height:400px;
width: 1200px;
position: absolute;
top:30px;
z-index:2;
background-color : transparent;
      }
 body {background-color:#c0c0c0; }

JS:

$('#toggle-box').click().toggle(function() {
$('#box').animate({ width: 'show' });
}, function() {
$('#box').animate({ width: 'hide' });
});

$('#toggle-box2').click().toggle(function() {
$('#box2').animate({ width: 'show' });
}, function() {
$('#box2').animate({ width: 'hide' });
});
$('#toggle-box3').click().toggle(function() {
$('#box3').animate({ width: 'show' });
 }, function() {
$('#box3').animate({ width: 'hide' });
});

以及我最初的灵感来源:http://jsfiddle.net/5g1zwLe3/ 我还使用paint.net来创建透明的PNG，或者是带有透明BG的PNG。

    /*Fully Opaque*/
    .class-name {
      opacity:1.0;
    }

    /*Translucent*/
    .class-name {
      opacity:0.5;
    }

    /*Transparent*/
    .class-name {
      opacity:0;
    }

    /*or you can use a transparent rgba value like this*/
    .class-name{
      background-color: rgba(255, 242, 0, 0.7);
      }

    /*Note - Opacity value can be anything between 0 to 1;
    Eg(0.1,0.8)etc */