JS实现背景透明度可变，文字不透明的效果

最近项目里需要实现这么个功能 类似网游中的聊天框 背景都是透明的 但是文字是不透明 所以如果简单的使用opacity(非IE)和alpha滤镜(IE)是无法实现这个效果的 会造成全部透明

解决办法如下

实现完全透明

设置background为transparent即可 两个浏览器通用

实现透明度可调节

要求改透明度 这里IE和非IE需要分开处理

非IE浏览器可通过支持CSS 的方式处理（不支持CSS 的这里忽略了） css的写法是

background color:rgba( )

前面 个参数是RGB 最后个是透明度

IE浏览器需要使用gradient滤镜 css写法是

filter: progid:DXImageTransform Microsoft gradient(startColorstr=# ffffff endColorstr=# ffffff)

摘录CSS手册说明用法

语法

filter : progid:DXImageTransform Microsoft Gradient ( 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 默认值为 #FF FF 不透明蓝色

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( )!importantbackground:none_filter:progid:DXImageTransform Microsoft AlphaImageLoader(src= sizingMethod= scale

这样在里面被嵌套的div点击就不会点到最外面的内容了 当然非IE就不需要加这个了

另外 对于不支持CSS 的浏览器 还有个解决办法就是把背景层和显示文字的层分开处理 放在同一级 只是通过位置上的调整做到看似有层级关系 这样使用透明效果就直接做也不会对文字有影响了

补充

IE 下 上述办法仍然无效 解决办法是套层iframe 在代码里可以这么写

lishixinzhi/Article/program/Java/JSP/201311/19841

仅从代码来看是没问题的。但影响程序运行的因素是多方面的，没看到你完整的代码（包括js和html），不好妄下定论，仅仅猜测一下：你说运行到调整透明度的语句就不再往下运行了，那么原因估计是两个：一是left和right这两个id在页面上不存在（或者存在一个以上）；二是浏览器不支持opacity。你可以在出错的地方测试一下：

console.log(document.getElementById("left"))

console.log(document.getElementById("left").style.opacity)

只要看哪个显示的是undefined，就知道是哪个出问题了。

其实你按F12打开开发者界面，看一下红字提示应该就知道什么原因了啊？不会用吗？

简单的用css3，复杂的用png图片。

css3，背景中间透明：

background-image: linear-gradient(red, red 25%, transparent 25%, transparent 75%, red 75%, red 100%), linear-gradient(to right, red, red 25%, transparent 25%, transparent 75%, red 75%, red 100%)

---