JS改变图片透明度

JavaScript027

JS改变图片透明度,第1张

//淡入效果(含淡入到指定透明度)    

function fadeIn(elem, speed, opacity){    

/*    

* 参数说明    

* elem==>需要淡入的元素    

* speed==>淡入速度,正整数(可选)    

* opacity==>淡入到指定的透明度,0~100(可选)    

*/    

   speed = speed || 20    

   opacity = opacity || 100    

//显示元素,并将元素值为0透明度(不可见)    

   elem.style.display = 'block'    

   iBase.SetOpacity(elem, 0)    

//初始化透明度变化值为0    

   var val = 0    

//循环将透明值以5递增,即淡入效果    

   (function(){    

       iBase.SetOpacity(elem, val)    

       val += 5    

       if (val <= opacity) {    

           setTimeout(arguments.callee, speed)    

       }    

   })()    

}    

    

//淡出效果(含淡出到指定透明度)    

function fadeOut(elem, speed, opacity){    

/*    

* 参数说明    

* elem==>需要淡入的元素    

* speed==>淡入速度,正整数(可选)    

* opacity==>淡入到指定的透明度,0~100(可选)    

*/    

   speed = speed || 20    

   opacity = opacity || 0    

   //初始化透明度变化值为0    

   var val = 100    

//循环将透明值以5递减,即淡出效果    

   (function(){    

       iBase.SetOpacity(elem, val)    

       val -= 5    

       if (val >= opacity) {    

           setTimeout(arguments.callee, speed)    

       }else if (val < 0) {    

//元素透明度为0后隐藏元素    

           elem.style.display = 'none'    

       }    

   })()    

}    

var btns = document.getElementById('demo')    

       

   btns.onclick = function(){    

       fadeIn(btns)    

   }    

   btns.onclick = function(){    

       fadeOut(btns,40)    

   }    

   

   <p id="demo" style="width:300pxheight:300pxbackground:#f00">淡入淡出</p>

试试吧

最近项目里需要实现这么个功能 类似网游中的聊天框 背景都是透明的 但是文字是不透明 所以如果简单的使用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

你想将此表格直接成为PNG格式的透明背景图片,

可在PS中不打开背景图片,直接将之前输出的“PDF”文件拖到PS中;

然后将其直接保存为PNG格式即可

保存成功后,就成为了一张PNG透明背景的图片,想要半透明 自己可以调一下

亲 如果要什么不明白 想要具体操作图片流程 你可以追问我