http://www.exp2up.com/2010/01/11/js%E5%AE%9E%E7%8E%B0%E8%83%8C%E6%99%AF%E9%80%8F%E6%98%8E%E5%BA%A6%E5%8F%AF%E5%8F%98%EF%BC%8C%E6%96%87%E5%AD%97%E4%B8%8D%E9%80%8F%E6%98%8E%E7%9A%84%E6%95%88%E6%9E%9C/
最近项目里需要实现这么个功能,类似网游中的聊天框,背景都是透明的,但是文字是不透明。
所以如果简单的使用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
|
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),写法参考:
- background:url('http://aaa.com/image/transparent.png')!important;background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://aaa.com/image/transparent.png',sizingMethod='scale'
这样在里面被嵌套的div点击就不会点到最外面的内容了。当然非IE就不需要加这个了。
另外,对于不支持CSS3的浏览器,还有个解决办法就是把背景层和显示文字的层分开处理,放在同一级,只是通过位置上的调整做到看似有层级关系,这样使用透明效果就直接做也不会对文字有影响了。
补充:
IE6下,上述办法仍然无效,解决办法是套层iframe,在html代码里可以这么写:
<div>
<!–[if lte IE 6.5]><iframe id=”ie6_filter”
style=”position:absolute;left:0px;top:0px;z-index:-1;filter:mask();display:block;width:100%;height:100%;”></iframe><![endif]–>
</div>
分享到:
相关推荐
CSS+JS实现点击菜单文字背景变色效果
利用js实现动态背景图效果,解压后打开文件夹,用浏览器打开index.html可以看到效果,登录的DIV框内效果请自行修改,该Demo仅提供动态背景图效果
图片的背景变透明不是为了酷,而是实际开发工作的需要。在web开发中,经常在网页上添加图片,如果图片的背景与网页的背景不同,会非常难看。如果图片的背景是透明的,那么无论网页的背景是什么,图片的背景是看不到...
本文实例讲述了JavaScript通过改变文字透明度实现的文字闪烁效果。分享给大家供大家参考,具体如下: 运行效果图如下: 完整实例代码如下: <html> <head> <meta charset="utf-8"> <title>...
Three.js实现透明烟雾翻滚的文字背景动画效果源码.zip
javascript实现网页背景颜色渐变
该 DIV是半秀明状态,这样可以看到背景也可以衬托文字,当鼠标放到文字上的时候,DIV层彻底不透明,文字清淅显示出来,一般这种效果都是要配合JavaScript的,这样兼容性会更好。 图片与文字结合的半透明效果,...
js_IE6支持png透明解决png_ie6下不透明背景图片
使用简单的js来实现网页背景色彩虹色渐变,不是切换,是一直循环变色
JS+CSS3文字和背景色彩对比度可视化效果,可自定义设置文字和背景的颜色,左右拖动水平滑杆来进行对比。
由于IE7以下不支持图片的背景的透明.根据IE特性,我们可以用IE的滤镜来实现透明处理 你只要包含下面这个pngfix.js文件就行,如下: <!--[if lt IE 7]> <script defer type="text/javascript" src="/Js/pngfix.js"> ...
主要介绍了js实现透明度渐变效果的方法,涉及javascript实现渐变效果的技巧,非常具有实用价值,需要的朋友可以参考下
js 实现 图像的模糊效果! 值得下载看看!资源免费,大家分享!!
一款小清新风格基于three.js实现的炫酷Canvas 3D线条背景动画特效,挺酷的效果。
JavaScript改变图片透明度,鼠标放上渐渐显示.rarJavaScript改变图片透明度,鼠标放上渐渐显示.rarJavaScript改变图片透明度,鼠标放上渐渐显示.rarJavaScript改变图片透明度,鼠标放上渐渐显示.rarJavaScript改变...
让网页有波浪文字的效果,同学们有需要的就下吧。
javascript实现旋转式的变色文字特效,文字变色旋转
这是一个使用d3.js 实现文字云效果的一个简单例子。 D3.js是一个功能非常强大的数据可视化js框架。比起echarts,定制性更强,插件丰富。