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打开开发者界面，看一下红字提示应该就知道什么原因了啊？不会用吗？

在Three.js中，如果要实现不影响内部材质的透明贴图，则需要对渲染器的混合模式进行设置。具体 *** 作如下：

1. 设置材质的混合模式。可以通过设置material.blending参数来完成。例如将blending设置为THREE.NormalBlending表示材质使用正常的混合模式。如果该参数设置为THREE.CustomBlending，则需要进一步设置material.blendSrc和material.blendDst参数来指定混合源和混合目标。

2. 通过调整渲染器的渲染顺序来避免内部材质的透明被多次覆盖。可以通过设置material.depthTest和material.depthWrite参数来实现。通常情况下，需要将这两个参数都设置为true，以确保在深度测试过程中材质的深度值得到正确的比较和保存。

3. 对于透明贴图本身，需要将其加载为一个带有alpha通道的纹理贴图，并将material.opacity属性设置为小于1的数值，以表明材质是半透明的。

综上所述，通过设置合适的混合模式、渲染顺序和透明度等参数，就可以在Three.js中实现不影响内部材质的透明贴图了。

---