CSS设置半透明背景的方法有很多种，我这里根据自己的经验来与大学分享学习常用的CSS设置半透明背景设置方法总结。
 
无图片半透明背景css
 
如果，单纯地用背景色并结合opacity进行设置透明度，那么会出现子元素中的文字也同样出现透明的情况。
 
第二种情况：用png透明度合适的背景图，但这样的话，还得针对IE6进行PNG图片的灰色背景处理。
 
第三种方法：用rgba结合专用hack兼容常规浏览器。
 
Rgba进行背景色填充，并设置透明度，并不会导致子元素也继承其的透明度。例如：background:rgba(0,0,0,0.5);这句，就适合了支持CSS3.0的浏览器。但IE6、IE7、IE8，我们可以利用到IE滤镜的渐变进行设置，开始和结束的颜色都一样就行了,代码如下: 代码如下 复制代码
 
filter:progid:DXImageTransform.Microsoft.gradient(GradientType = 0,startColorstr = '#9A000000', endColorstr = '#9A000000' )9
 
(9A是透明度的16进制，例如上面，众所周知，透明度在IE中的值是1%~100%,之间，而在颜色中，透明度为100%的时候就是RGB的满值255，这时候，如果想设置0.6的透明度，就需要用255*0.6=153，这时候，这个154是十进制，我们还需要转换为16进制才能用，经过百度的转换器得出是9A，所以在开始和结束的颜色前面加上：9A)
 
具体参数含义如下：
 
pacity 透明度。默认的范围是从0 到 100，他们其实是百分比的形式。也就是说，0代表完全透明，100代表完全不透明。
 
finishopacity 是一个可选参数，如果想要设置渐变的透明效果，就可以使用他们来指定结束时的透明度。范围也是0 到 100。
 
style   指定透明区域的形状特征：0 代表统一形状，1 代表线形，2 代表放射状，3 代表矩形
 
startx  渐变透明效果开始处的 X坐标。
 
starty  渐变透明效果开始处的 Y坐标。
 
finishx 渐变透明效果结束处的 X坐标。
 
finishy 渐变透明效果结束处的 Y坐标。
 
以上的参数可以选用，可以只设置一个opacity
 
例如：
 
{filter:alpha(opacity=50)}
 
这个就是半透明的设置，只要把{}中的代码加入到需要设置的模版中的{}的即可，记得与前面的代码之间要用";"间隔，不然设置是无效的
 
例如：
 
我要设置模版区域背景的颜色(白色) 半透明
 
只要在
 
.modbox{}
 
.modbl{}
 
.modbc{}
 
.modbr{}
 
中都设置background-color:white
 
这些就是模版背景设置的ID
 
然后再在.modbox,.modbl,.modbc,.modbr{}如果没有这个的话可以自己加一个
 
中加入filter : alpha(opacity=80)就可以达到所有模版的背景都是半透明的效果了
 
如果希望像我这样只显示blog的背景，别的都全透明的话，那么就在别的模版中加入背景全透明的代码即可
 
background:transparent                       这就是背景全透明的代码
 
不过这样的话，相关模版的主要区域是透明了，可是底下还会有一条颜色留着的，所以另外还要在
 
.modbl{}
 
.modbc{}
 
.modbr{}
 
中也加入背景全透明的代码，这样才能让模版区域完全透明，就像我现在的效果一样
 
另外这个参数目前只能用于背景色的设置，背景图片无法设置为半透明
 
我把我的背景半透明代码贴出来吧 代码如下 复制代码
 
.modbox{padding:10px 10px 0 10px;background-color:#FFFFFF;border-left:1px solid #813533;border-right:1px solid #813533}
 
.modbl{background:transparent;border-left:1px solid #813533;border-bottom:1px solid #813533;line-height:1px}
 
.modbc{background:transparent;border-bottom:1px solid #813533;line-height:1px}
 
.modbr{background:transparent;;border-right:1px solid #813533;border-bottom:1px solid #813533;line-height:1px}
 
.modbox,.modbl,.modbc,.modbr{filter:alpha(opacity=80);-moz-opacity:0.8;width:auto !important;width:100%}
 
红色字是关键设置，如果不想设置全透明的话，可以把.modbl{}.modbc{}.modbr{}三个中的background:transparent改成.modbox{}中的background-color:#FFFFFF，当然这里的#FFFFFF你可以换成自己喜欢的颜色，不过为了美观统一，建议这4个的颜色代码最好设置为一样的
 
附：#FFFFFF就是white，白色；#000000就是black，黑色
 
哎，累死了，打了这么多，希望大家能学习到啊……………………
 
不过这样的话，相关模版的主要区域是透明了，可是底下还会有一条颜色留着的，所以另外还要在
 
.modbl{}
 
.modbc{}
 
.modbr{}
 
中也加入背景全透明的代码，这样才能让模版区域完全透明，就像我现在的效果一样
 
另外这个参数目前只能用于背景色的设置，背景图片无法设置为半透明
 
我把我的背景半透明代码贴出来吧 代码如下 复制代码
 
.modbox{padding:10px 10px 0 10px;background-color:#FFFFFF;border-left:1px solid #813533;border-right:1px solid #813533}
 
.modbl{background:transparent;border-left:1px solid #813533;border-bottom:1px solid #813533;line-height:1px}
 
.modbc{background:transparent;border-bottom:1px solid #813533;line-height:1px}
 
.modbr{background:transparent;;border-right:1px solid #813533;border-bottom:1px solid #813533;line-height:1px}
 
.modbox,.modbl,.modbc,.modbr{filter:alpha(opacity=80);-moz-opacity:0.8;width:auto !important;width:100%}
 
红色字是关键设置，如果不想设置全透明的话，可以把.modbl{}.modbc{}.modbr{}三个中的background:transparent改成.modbox{}中的background-color:#FFFFFF，当然这里的#FFFFFF你可以换成自己喜欢的颜色，不过为了美观统一，建议这4个的颜色代码最好设置为一样的
 
附：#FFFFFF就是white，白色；#000000就是black，黑色
 
其他的还存在差异的IE浏览器，还得加这么一句：background:rgba(0,0,0,0.6) 9;看到别的网站上这么写，上面的还有待测试.这些天忙，先大概记录着
 
看一些实例
 
要设置某一元素的背景为透明，在 chrome 、firefox、opera 下是这样的： 代码如下 复制代码
 
background-color: rgba(0, 0, 0, 0.4);
 
background-color: rgba(0, 0, 0, 0.4);
 
rgba 中的最后一个参数 0.4 就是想要的透明度，范围在0～1之间。
 
在 ie 中一般是这样的： 代码如下 复制代码
 
background-color: rgb(0, 0, 0);
 
filter: alpha(opacity=40);opacity
 
表示透明度，它的值范围在 0～100 之间
 
那么如何兼容各浏览器呢？只要把它们写在一起就行了。
 
由于 ie 不支持 rgba，所以会忽略之。其他浏览器对于自己不支持的，一般也会忽略。
 
下面来个示例：
 
HTML 代码：
 
代码如下 复制代码
 

  
aaaaa
 
 

  

   
box
  
 
 
CSS 代码： 代码如下 复制代码
 
.non-transparent:hover {
 
background-color: yellow;
 
}
 
.transparent {
 
position: absolute;
 
top: 0;
 
left: 0;
 
text-align: center;
 
width: 100%;
 
height: 100%;
 
filter: alpha(opacity=40);
 
background-color: rgb(0, 0, 0);
 
background-color: rgba(0, 0, 0, 0.4);
 
}
 
.box {
 
background-color: yellow;
 
width: 50%;
 
height: 50%;
 
position: relative;
 
left: 5%;
 
top: 10%;
 
}
 
显示效果：
 
chrome:
 

 
firefox:
 

 
opera:
 

 
ie8:
 

 
另外，在 chrome、firefox、opera 中也可以这样:
 
opacity: 0.4;
 
但是这样的话，会把所有子元素的透明度也设置为同样的值，效果如下图：
 

 
我不确定这是否可行,但有没有办法安全地允许弹出窗口是半透明的,即使父容器也是半透明的？
 
如果没有,使用或扩展而不是JPopupMenu的明智替代方案是什么？
 
注意：半透明是指不具有“背景”的组件,类似于setOpaque(false);的效果.谢谢.
 
来自2009年用户camickr的论坛回答：
 
I don’t know if transparency painting has changed in 1.6.0_10. Prior
 
to that I believe transparency can only be achieved in lightweight
 
components (ie. Swing does all the painting). JFrame, JWindow and
 
JDialog are not lightweight because they use OS components.
 
In the case of a popup, it is lightweight when entirely contained
 
within its parent frame. But a lightweight popup can not be painted
 
outside the bounds of the frame so a JWindow (I believe) is used as
 
the popup, which can’t be transparent.
 
SSCCE：在半透明的JFrame顶部显示半透明的JWindow
 
import com.sun.awt.AWTUtilities;
 
import java.awt.Color;
 
import java.awt.Graphics;
 
import java.awt.Graphics2D;
 
import java.awt.RenderingHints;
 
import java.awt.event.ActionEvent;
 
import java.awt.event.ActionListener;
 
import javax.swing.*;
 
public class OpaqueWindowSSCCE {
 
private int countdown = 5;
 
public static void main(String[] args) {
 
new OpaqueWindowSSCCE();
 
}
 
public OpaqueWindowSSCCE() {
 
final JFrame frame = new JFrame("OpaqueWindowSSCCE");
 
final JWindow window = new JWindow();
 
new Timer(1000, new ActionListener(){
 
@Override
 
public void actionPerformed(ActionEvent e) {
 
if(--countdown == 0){
 
frame.dispose();
 
window.dispose();
 
System.exit(0);
 
} else {
 
frame.repaint();
 
}
 
}
 
}).start();
 
frame.setContentPane(new JPanel() {
 
@Override
 
public void paintComponent(Graphics paramGraphics) {
 
super.paintComponent(paramGraphics);
 
Graphics2D g = (Graphics2D) paramGraphics.create();
 
g.setRenderingHint(RenderingHints.KEY_ANTIALIASING, RenderingHints.VALUE_ANTIALIAS_ON);
 
g.setColor(new Color(50, 50, 50));
 
g.fillRoundRect(0, 0, getWidth(), getHeight(), 10, 10);
 
g.setColor(new Color(180, 180, 180));
 
g.drawString("Closing in " + countdown + " seconds", 20, 25);
 
}
 
});
 
window.setContentPane(new JPanel() {
 
@Override
 
public void paintComponent(Graphics paramGraphics) {
 
super.paintComponent(paramGraphics);
 
Graphics2D g = (Graphics2D) paramGraphics.create();
 
g.setRenderingHint(RenderingHints.KEY_ANTIALIASING, RenderingHints.VALUE_ANTIALIAS_ON);
 
g.setColor(new Color(180, 180, 180));
 
g.fillRoundRect(0, 0, getWidth(), getHeight(), 10, 10);
 
}
 
});
 
frame.setUndecorated(true);
 
((JComponent) frame.getContentPane()).setOpaque(false);
 
((JComponent) window.getContentPane()).setOpaque(false);
 
AWTUtilities.setWindowOpaque(frame, false);
 
AWTUtilities.setWindowOpaque(window, false);
 
window.setAlwaysOnTop(true);
 
frame.setBounds(200,200,500,500);
 
window.setBounds(600,600,200,200);
 
frame.setVisible(true);
 
window.setVisible(true);
 
}
 
}

 
当我们在做网页的时候，有时为了整体页面搭配的美观，需要设置层样式为透明或者半透明，因为透明往往能产生不错的网页视觉效果。在使用的背景的页面中，如果不设置页面内容区为半透明状态，突出不了背景的作用，也显得不那么协调。用传统的CSS实现背景半透明效果的方法是用两个层，一个放文字，另一个做透明背景，但是透明滤镜的效果会影响到里面的内容。如果只需要在IE下实现，是有更简单的方法可以实现的。
 
CSS半透明属性
 
兼容主流浏览器的CSS透明代码:
 
.transparent_class {
 
filter:alpha(opacity=50);
 
-moz-opacity:0.5;
 
-khtml-opacity: 0.5;
 
opacity: 0.5;
 
}
 
上面的几个属性分别是:
 
①opacity: 0.5; 这是最重要的，因为它是CSS标准.该属性支持Firefox, Safari和 Opera.
 
②filter:alpha(opacity=50); 这个是为IE6设的，可取值在0-100，其它三个0到1.
 
③-moz-opacity:0.5; 这个是为了支持一些老版本的Mozilla浏览器。
 
④-khtml-opacity: 0.5; 这个为了支持一些老版本的Safari浏览器。
 
CSS透明度继承问题
 
CSS的透明属性涉及到一个继承问题，当为父级元素设置透明度后，子元素将自动继承其透明度，比如下图的效果:
 

 
即使你又为子元素指定透明度为1也是无效的。
 
对于子元素是文字的情况，一般的解决方法是如果多少还能够看清，就不管。另一个折中的方法是，为文本子元素指定一个相对更深的颜色。也就是说，当子元素继承透明度后，所得到的文本颜色正好就是你想要的。前提是这个颜色还有加深的可能，和需要详细的计算颜色和透明度的值。
 
还有“取消透明度继承”的说法，这个说法是不太准确的，实际上没有任何取消透明度继承的方法。只能说，当想要实现“多个元素覆盖，只让指定的元素透明”时，可以使用的一些Hack。
 
还有一种不错的实现方法：添加一个空元素作为透明层，和不想透明但是要实现覆盖效果的元素为同级元素。父级元素使用position:relative定位; 两个子元素使用position:absolute定位，实现覆盖。具体解释说明请点击本链接
 

 
IE下实现半透明
 
HTML代码：
 
  
 
背景为红色(#FF0000)，透明度20%。
 
 

 
代码是
 
filter: Alpha(Opacity=50)
 
background-color: rgba(0, 0, 0, 0.5);
 
这种设置层里面所有的东西都透明了。
 
其实说到半透明，相信绝大部分同仁应该都知道的一种很常用的方法，即css3的opacity结合ie
 
alpha滤镜即可。比如：
 
.translucent{
 
background:#000;
 
opacity:
 
0.5;
 
filter:
 
progid:DXImageTransform.Microsoft.alpha(opacity=50);
 
}
 
上面这个样式类即为一个背景色为黑色，元素半透明的样式类。这也是目前半透明遮罩层最常用的方法，(ps:有个小地方需要注意，在ie6下需要触发它的haslayout或包裹性才有效，不过一般不存在问题，因为一般这种半透明遮罩的元素都是绝对定位的，overflow:hidden;或position:absolute;或float或display:inline-block都可以触发元素包裹性..这个问题扯远了，以后会单独再出一篇关于包裹性的文)
 
恩，正如各位看官所见，打开的层的确半透明了，不过半透明的好彻底，以至于层里面所有子元素都半透明了...但是我的层里面的图片和那个红色的块本来是不打算透明的，我只要背景色透明就好了..所以这个方法并没有满足这个需求。
 
于是，针对只要背景色透明的东东，应该有另一种办法，就是css3的rgba属性结合ie的gradient滤镜
 
.bg-translucent{
 
background:rgba(0,0,0,0.5);
 
filter:progid:DXImageTransform.Microsoft.gradient(startcolorstr=#7F000000,endcolorstr=#7F000000);
 
}
 
这个稍微复杂一点
 
在CSS中有一个Alpha滤镜，这个滤镜可以设置目标元素的透明度。还可以通过指定坐标，从而实现各种不同范围的透明度。具体语法如下：
 
{filter:
 
alpha(opacity=#opacity,finishopacity=#finishopacity,style=#style,startx=#startx,starty=#starty,finishx=#finishx,finishy=#finishy)}
 
具体参数含义如下：
 
opacity 透明度。默认的范围是从0 到 100，他们其实是百分比的形式。也就是说，0代表完全透明，100代表完全不透明。 finishopacity 是一个可选参数，如果想要设置渐变的透明效果，就可以使用他们来指定结束时的透明度。范围也是0 到 100。 style 指定透明区域的形状特征：0 代表统一形状，1 代表线形，2 代表放射状，3 代表矩形 startx 渐变透明效果开始处的 X坐标。 starty 渐变透明效果开始处的 Y坐标。 finishx 渐变透明效果结束处的 X坐标。 finishy 渐变透明效果结束处的 Y坐标。
 
以上的参数可以选用，可以只设置一个opacity
 
例如：
 
{filter:alpha(opacity=50)}
 
这个就是半透明的设置，只要把{}中的代码加入到需要设置的模版中的{}的即可，记得与前面的代码之间要用";"间隔，不然设置是无效的
 
例如：
 
我要设置模版区域背景的颜色(白色)+半透明[就是我现在blog的效果]
 
只要在
 
.modbox{}
 
.modbl{}
 
.modbc{}
 
.modbr{}
 
中都设置background-color:white
 
这些就是模版背景设置的ID
 
然后再在.modbox,.modbl,.modbc,.modbr{}如果没有这个的话可以自己加一个
 
中加入filter : alpha(opacity=80)就可以达到所有模版的背景都是半透明的效果了
 
如果希望像我这样只显示blog的背景，别的都全透明的话，那么就在别的模版中加入背景全透明的代码即可
 
background:transparent 这就是背景全透明的代码
 
不过这样的话，相关模版的主要区域是透明了，可是底下还会有一条颜色留着的，所以另外还要在
 
.modbl{}
 
.modbc{}
 
.modbr{}
 
中也加入背景全透明的代码，这样才能让模版区域完全透明，就像我现在的效果一样
 
另外这个参数目前只能用于背景色的设置，背景图片无法设置为半透明