成都网站建设
|
域名注册
|
虚拟主机
|
网站制作
|
网站案例
|
网站优化
|
网站推广
|
企业邮局
|
服务器租用
|
广告设计
首页
域名注册
虚拟主机
网站建设
服务器租用
营销推广
网站程序
前端开发
移动互联网
企业邮箱
广告设计
|
成都VI设计
|
画册设计制作
|
成都包装设计
|
网页设计
|
成都虚拟主机
|
网站建设
|
营销型网站建设
前端开发
html
div+css
css
jQuery
JavaScript教程
ajax教程
XML教程
json教程
bootstrap教程
域名注册
英文域名
中文域名
域名转入\转出
通用网址
无线网址
虚拟主机
主机购买
数据库
主机管理
FTP上传
主机续费升级
网站建设
网站策划
网站方案
网页设计
网站制作
网站改版
服务器租用
web服务器
FTP服务器
服务器租用
服务器托管
云主机服务器
营销推广
seo优化
网站推广
搜索引擎
免费资源
网站程序
vb编程
asp程序
php程序
asp.net程序
C#程序
移动互联网
wap手机网站
app应用开发
微网站
企业邮箱
企业邮箱优势
企业邮箱设置
邮箱收发问题
邮箱功能讲解
邮箱其他问题
网站备案
备案流程指南
备案资料下载
备案常见问题
各省备案要求
当前位置:
创新互联
>>
常见问题
>>
前端开发
>>
JavaScript教程
>>
JS实现背景透明度可变,文字不透明的效果
JS实现背景透明度可变,文字不透明的效果
作者:创新互联 文章来源:前端开发部 点击数:
更新时间:2011-12-19
最近项目里需要实现这么个功能,类似网游中的聊天框,背景都是透明的,但是文字是不透明。所以如果简单的使用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),写法参考:
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就不需要加这个了。
另外,对于不支持
CSS
3的浏览器,还有个解决办法就是把背景层和显示文字的层分开处理,放在同一级,只是通过位置上的调整做到看似有层级关系,这样使用透明效果就直接做也不会对文字有影响了。
补充:
IE6下,上述办法仍然无效,解决办法是套层iframe,在html代码里可以这么写:
<div><BR>
<!–[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]–>
<BR></div>
用JavaScript实现窗口从天而降效果
:上一篇
我要在innerHTML中执行script脚本
:下一篇
JavaScript教程相关文章
用JavaScript实现窗口从...
js的替换函数replace只替...
网站建设中JavaScript的...
4种调用JavaScript的函...
Javascript无限分类算法...
javascript表单之间的数...
JavaScript实用技巧集锦
用Javascript轻松制作抽...
创新互联专业网站设计制作、网站建设、UI设计、网页设计。欢迎咨询028-86922220
网站备案
|
企业邮箱
|
移动互联网
|
前端开发
|
网站程序
|
营销推广
|
服务器租用
|
网站建设
|
虚拟主机
|
域名注册
|
热门搜索
服务电话:028-86922220 13518219792 公司地址:成都市太升南路288号锦天国际A幢10楼2号
企业邮箱:
service@cdxwcx.com
版权所有:成都创新互联科技有限公司 蜀ICP备09010846号
成都网站建设