<!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样式的效果图：
1、如果想改变css背景图片，一般的做法只能使用css滤镜；2、css滤镜主要包括：
Speia滤镜 灰度图滤镜 高斯模糊滤镜 反色滤镜 饱和度滤镜
对比度滤镜亮度滤镜色相旋转滤镜 阴影滤镜
3、css滤镜在浏览器兼容是比较坑爹的问题，ie浏览器有自己一套滤镜filter家族，基本所有ie内核浏览器都支持，ff和Chrome，opera则主要使用css3的滤镜，这些浏览器在后期版本支持css3的滤镜（目前版本基本都支持html5和css3），通过滤镜改变背景图的颜色和效果，当然这些滤镜主要是为了效果而产生，颜色只是固定的几种效果。
4、个别时候，css滤镜还需要结合js使用，才能到达必要效果，其实一般背景图片都是用透明度的css来设置它的颜色度；
透明度css列子：
transparent_class {
filter:alpha(opacity=50)
-moz-opacity:0.5
-khtml-opacity: 0.5
opacity: 0.5
}
