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

Posted 2022-07-20 色彩

篇首语：从来好事天生俭，自古瓜儿苦后甜。本文由小常识网(cha138.com)小编为大家整理，主要介绍了知识大全 JS实现背景透明度可变，文字不透明的效果相关的知识，希望对你有一定的参考价值。

JS实现背景透明度可变，文字不透明的效果 以下文字资料是由(全榜网网www.cha138.com)小编为大家搜集整理后发布的内容，让我们赶快一起来看一下吧！

　　最近项目里需要实现这么个功能类似网游中的聊天框背景都是透明的但是文字是不透明所以如果简单的使用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( )!important;background:none;_filter:progid:DXImageTransform Microsoft AlphaImageLoader(src= sizingMethod= scale

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

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

　　补充

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

cha138/Article/program/Java/JSP/201311/19841