1、准备好初始化的代码
<html>
<head>
<meta charset="utf-8"/>
<style>
</style>
</head>
<body>
<div></div>
</body>
</html>
2、初始化样式
div{
border:1px red solid;
width:800px;
height:800px;
background-color:blue;
}
3、运行结果为
4、设置背景颜色半透明的样式代码background-color:rgba(0,0,255,0.5);
5、运行结果为
透明原理：把背景颜色设置为rgb的方式，然后再加一个透明度就可以设置为半透明了。
注意：设置背景颜色时哪里应该写成rgba。
一、首先HTML布局：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css设置前景色透明</title>
</head>
<body>
<div class="box">我是一段文字</div>
</body>
</html>
二、没有加CSS的样式的效果显示：
三、加CSS样式的HTML：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css设置前景色透明</title>
<style type="text/css">
.box {
width: 700px;
height: 350px;
margin: 0 auto;
color: white;
background-color: orange;
/*color: orange; 这个方式从视觉上是透明了的，原理就是把文字颜色设置成与背景颜色一样 有局限性 双击看得到文字 */
color: transparent; /*根上面方法一样 双击看得到文字 比上面好 推荐*/
}
</style>
</head>
<body>
<div class="box">我是一段文字</div>
</body>
</html>
在开发工具里面的截图：
四、加了CSS样式的效果图：
filter：alpha（opacity=opcity，finishopacity=finishopacity，
style=style，startX=startX，startY=startY，finishX=finishX，
finishY=finishY）
哇，怎么这么长。是啊，不过这些参数都各有其用。
Opacity代表透明度等级，可选值从0到100，0代表完全透明，100代表完全不透明。 Style参数指定了透明区域的形状特征。其中0代表统一形状；1代表线形；2代表放射状；3代表长方形。
Finishopacity是一个可选项，用来设置结束时的透明度，从而达到一种渐变效果，它的值也是从0到100。 StartX和StartY代表渐变透明效果的开始坐标，finishX和finishY代表渐变透明效果的结束坐标。
从上面讲的我们可以看出，如果不设置透明渐变效果，那么只需设置opacity这一个参数就可以了。
实现上面这种效果的代码如下：
<html>
<head>
<title>alpha</title>
<style>//*定义CSS样式*//
<!--
div{position：absolute； left：50；top：70； width：150； }
//*定义DIV区域内的样式（位置为绝对定位，left、top、width的坐标）*//
img{position：absolute；top：20；left：40；
filter：alpha(opacity=80)}
//*定义图片的样式，绝对定位，滤镜属性是透明度为80*//
-->
</style>
</head>
<body>
<div>
<p style=“font-size：48；font-weight：bold；color：red；”>
Beautiful </p>//*定义字体属性，前景色为红色*//
</div>
<p><img src=“ss01076.jpg”> </p>
//*导入一张图片*//
</body>
</html>
filter:alpha(opacity=50); /*IE滤镜，透明度50%*/
-moz-opacity:0.5; /*Firefox私有，透明度50%*/
opacity:0.5;/*其他，透明度50%*/
举个例子：
通过ie6 ie7 ie8 ff3 opera 谷歌 safari测试
#test{
background-color:#0000CC;
filter:alpha(opacity=50);
-moz-opacity:0.5;
opacity:0.5;
width:100px;
height:100px;}
但是还是会有很多问题，浏览器兼容性问题，等
而且IE滤镜的频繁使用会使浏览器的执行效率降低。
所以不提倡过多使用。
也还有其他方法可以模拟，比如用宽高都是1px的透明png图片覆盖等等。
/**************************************************/
LZ自己举一反三啊，前景色不就是color么
#test{
background-color:#000}
#test span{
color:#fff;
zoom:1 /*触发IE下块级元素*/
filter:alpha(opacity=50);
-moz-opacity:0.5;
opacity:0.5;
}
<div id="test"><span>前景色透明度</span></div>
LZ看看“前景色透明度”这几个字是不是纯白色，还是白色的50%透明。本回答被提问者采纳
<div class="box"></div>
<style>
.box{width:300px; height:200px; margin:0 auto; boxder:1px solid #ccc; background:#000; filter:alpha(opacity:30); opacity:0.3; -moz-opacity:0.3;-khtml-opacity: 0.3}
</style>
其中background:#000; filter:alpha(opacity:30); opacity:0.3;为关键代码，当opacity值为1时，表示完全不透明，为0时表示完全透明。
其关的属性介绍如下:
opacity: 0.3；这是“最重要的”，因为它是在CSS的现行标准。这将在Firefox，Safari和Opera的大多数版本的工作。这将是所需要的一切如果所有的浏览器都支持目前的标准。
filter:alpha(opacity=50); /*IE滤镜，透明度50%*/
-moz-opacity:0.5; /*Firefox私有，透明度50%*/
opacity:0.5;/*其他，透明度50%*/