最近项目里需要实现这么个功能类似网游中的聊天框背景都是透明的但是文字是不透明所以如果简单的使用opacity(非IE)和alpha滤镜(IE)是无法实现这个效果的会造成全部透明
解决办法如下
实现完全透明
设置background为transparent即可两个浏览器通用
实现透明度可调节
要求改透明度这里IE和非IE需要分开处理
非IE浏览器可通过支持CSS的方式处理（不支持CSS的这里忽略了）css的写法是
backgroundcolor:rgba()
前面个参数是RGB最后个是透明度
IE浏览器需要使用gradient滤镜css写法是
filter: progid:DXImageTransformMicrosoftgradient(startColorstr=#ffffffendColorstr=#ffffff)
摘录CSS手册说明用法
语法
filter : progid:DXImageTransformMicrosoftGradient ( enabled= bEnabled startColorStr= iWidth endColorStr= iWidth )
属性
enabled : 可选项布尔值(Boolean)设置或检索滤镜是否激活true | false true : 默认值 滤镜激活
false : 滤镜被禁止
startColorStr : 可选项字符串(String)设置或检索色彩渐变的开始颜色和透明度
其格式为 #AARRGGBB AA RR GG BB 为十六进制正整数取值范围为 – FF RR 指定红色值 GG 指定绿色值 BB 指定蓝色值参阅 #RRGGBB 颜色单位 AA 指定透明度 是完全透明 FF 是完全不透明超出取值范围的值将被恢复为默认值
取值范围为 #FF – #FFFFFFFF 默认值为 #FFFF 不透明蓝色
EndColorStr : 可选项字符串(String)设置或检索色彩渐变的结束颜色和透明度参阅 startColorStr 属性默认值为 #FF 不透明黑色
特性
Enabled : 可读写布尔值(Boolean)参阅 enabled 属性
GradientType : 可读写整数值(Integer)设置或检索色彩渐变的方向 | : 默认值 水平渐变
: 垂直渐变
StartColorStr : 可读写字符串(String)参阅 startColorStr 属性
StartColor : 可读写整数值(Integer)设置或检索色彩渐变的开始颜色 取值范围为 – 为透明 为不透明白色
EndColorStr : 可读写字符串(String)设置或检索色彩渐变的结束颜色和透明度参阅 startColorStr 属性默认值为 #FF 不透明黑色
EndColor : 可读写整数值(Integer)设置或检索色彩渐变的结束颜色 取值范围为 – 为透明 为不透明白色当在脚本中使用此特性时也可以用十六进制格式 xAARRGGBB
说明
在对象的背景和内容之间显示定制的色彩层
当此效果通过转变显示时在渐变册色彩层之上的文本程序性的初始化为透明的当色彩渐变实现后文本颜色会以其定义的值更新
补充完美支持IE和IE
这么写在IE和IE中会有点小问题原因是使用transparent的背景时鼠标居然能点到透明层后面的内容还会造成部分事件的实效解决办法是在外面套个div然后给他加个完全透明的背景图（PNG）写法参考
background:url()!important;background:none;_filter:progid:DXImageTransformMicrosoftAlphaImageLoader(src=sizingMethod=scale
这样在里面被嵌套的div点击就不会点到最外面的内容了当然非IE就不需要加这个了
另外对于不支持CSS的浏览器还有个解决办法就是把背景层和显示文字的层分开处理放在同一级只是通过位置上的调整做到看似有层级关系这样使用透明效果就直接做也不会对文字有影响了
补充
IE下上述办法仍然无效解决办法是套层iframe在html代码里可以这么写
<div><BR><!–[if lte IE ]><iframe id=”ie_filter” style=”position:absolute;left:px;top:px;zindex:;filter:mask();display:block;width:%;height:%;”></iframe><![endif]–><BR></div>
