JS实现背景透明度可变，文字不透明的效果 |
|
近期 名目里需求实现这么个 性能， 类似网游中的聊天框，背景都是透明的，然而文字是不透明 。所以假如 方便的 使用opacity(非IE)和alpha滤镜(IE)是 无奈实现这个 动机的，会造成所有透明 。
解决 步骤如下： 1.实现 彻底透明： 设置background为transparent即可，两个阅读器通用
2.实现透明度可调节： 要求改透明度，这里IE和非IE需求 离开 解决 非IE阅读器可通过 支撑CSS3的 模式 解决(不 支撑CSS3的这里 忽略了)，css的写法是 background-color:rgba(255,255,255,0.5) 前面3个参数是RGB，最终个是透明度 IE阅读器需求 使用gradient滤镜，css写法是 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00ffffff,endColorstr=#00ffffff) 摘录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 为十六进制正整数 。取值 规模为 00 – FF 。 RR 指定红色值， GG 指定绿色值， BB 指定蓝色值，参阅 #RRGGBB 色彩单位 。 AA 指定透明度 。 00 是 彻底透明 。 FF 是 彻底不透明 。超出取值 规模的值将被 复原为默许值 。 取值 规模为 #FF000000 – #FFFFFFFF 。默许值为 #FF0000FF 。不透明蓝色 。 EndColorStr : 可选项 。字符串(String) 。设置或检索 色彩渐变的 完毕 色彩和透明度 。参阅 startColorStr 属性 。默许值为 #FF000000 。不透明黑色 。 特点： Enabled : 可读写 。布尔值(Boolean) 。参阅 enabled 属性 。 GradientType : 可读写 。整数值(Integer) 。设置或检索 色彩渐变的方向 。1 | 0 1 : 默许值 。水平渐变 。 0 : 垂直渐变 。 StartColorStr : 可读写 。字符串(String) 。参阅 startColorStr 属性 。 StartColor : 可读写 。整数值(Integer) 。设置或检索 色彩渐变的开始 色彩 。 取值 规模为 0 – 4294967295 。 0 为透明 。 4294967295 为不透清楚色 。 EndColorStr : 可读写 。字符串(String) 。设置或检索 色彩渐变的 完毕 色彩和透明度 。参阅 startColorStr 属性 。默许值为 #FF000000 。不透明黑色 。 EndColor : 可读写 。整数值(Integer) 。设置或检索 色彩渐变的 完毕 色彩 。 取值 规模为 0 – 4294967295 。 0 为透明 。 4294967295 为不透清楚色 。当在脚本中 使用此 特点时，也 可以用十六进制 格局： 0xAARRGGBB 。 注明： 在对象的背景和内容中间显示定制的 色彩层 。 当此 动机通过改变显示时，在渐变册 色彩层之上的文本程序性的初始化为透明的，当 色彩渐变实现后，文本 色彩会以其定义的值更新 。 3. 补充 圆满 支撑IE6和IE7 这么写在IE7和IE6中会有点小问题，缘由是 使用transparent的背景时，鼠标竟然能点到透明层后面的内容 。 。 。还会造成 部分事件的实效 。解决 步骤是在外面套个div， 而后给他加个 彻底透明的背景图(PNG)，写法参考： 这样在里面被嵌套的div点击就不会点到最外面的内容了 。固然非IE就不需求加这个了 。 另外，关于不 支撑CSS3的阅读器，还有个解决 步骤便是把背景层和显示文字的层 离开 解决，放在同一级，只不过通过位置上的调整做到看似有层级关系，这样 使用透明 动机就直接做也不会对文字有影响了 。 补充： IE6下，上述 步骤 依旧无效，解决 步骤是套层iframe，在html代码里 可以这么写： |
