实现背景透明的方法,兼容ie6/7/8等浏览器
今天登录支付宝,发现支付宝首页首页改版了,给人一种清新,自然,简洁的感觉,另外发现支付首页的登录界面用的一种半透明的背景,刚开始以为是用的rgba方法,但是发现在ie6、7、8中登录界面的背景也是同样的半透明形式,于是研究了一下代码样式,然后自己写了一个例子,用来跟大家一起分享学习。
主要运用了rgba和filter技术:
html 代码如下:
<div class="content">前端蓝枫</div>
css代码如下:
body{ background:url(images/bigben.jpg);}
.content{ width:300px; height:300px; margin:40px auto; background:rgba(0,0,0,0.4); //
padding:10px; color:#fff;
filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,
StartColorStr='#66000000',EndColorStr='#66000000');}
:root .content{filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr='#00000000',
EndColorStr='#00000000')\9}
//解决ie9的bug问题,使ie9去掉filter功能方法直接使用rgba方法,
CSS 之 FILTER: progid:DXImageTransform.Microsoft.gradient2009-02-23 11:05语法格式:
filter:progid:DXImageTransform.Microsoft.Gradient
(enabled=bEnabled,startColorStr=iWidth,endColorStr=iWidth)
属性:
enabled:可选项。布尔值(Boolean)。设置或检索滤镜是否激活。 true | false
true: 默认值。滤镜激活。
false:滤镜被禁止。
GradientType:可读写。整数值(Integer)。设置或检索色彩渐变的方向。1 | 0
1:默认值。水平渐变。
0:垂直渐变。
StartColorStr:可读写。可选项。字符串(String)。设置或检索色彩渐变的开始颜色和透明度。其格式为 #AARRGGBB 。 AA 、 RR 、 GG 、 BB 为十六进制正整数。取值范围为 00 - FF 。 RR 指定红色值, GG 指定绿色值, BB 指定蓝色值,参阅 #RRGGBB 颜色单位。 AA 指定透明度。 00 是完全透明。 FF 是完全不透明。超出取值范围的值将被恢复为默认值。取值范围为 #FF000000 - #FFFFFFFF 。默认值为 #FF0000FF 。不透明蓝色。
StartColor:可读写。整数值(Integer)。设置或检索色彩渐变的开始颜色。 取值范围为 0 - 4294967295 。 0 为透明。 4294967295 为不透明白色。
EndColorStr:可读写。字符串(String)。设置或检索色彩渐变的结束颜色和透明度。参阅 startColorStr 属性。默认值为 #FF000000 。不透明黑色。
EndColor:可读写。整数值(Integer)。设置或检索色彩渐变的结束颜色。 取值范围为 0 - 4294967295 。 0 为透明。 4294967295 为不透明白色。当在脚本中使用此特性时,也可以用十六进制格式: 0xAARRGGBB 。
没用opacity解决透明的方法主要是因为它容易把内容也半透明话,这种滤镜的方法正好解决了那个bug,实现ie中背景透明,内容不透明。
预览的效果在各个主要的浏览器中大致如下:
实现背景透明的方法,兼容ie6/7/8等浏览器相关推荐
- flash透明\flash置底无效\flash遮挡div的解决方法 兼容Firefox ,IE,chrome浏览器
flash透明无效 \ flash置底无效 \ flash遮挡div 的解决方法 兼容Firefox ,IE,chrome浏览器 flash透明 flash置底 lash遮挡div 基本思路为: ...
- Silverlight 置于悬浮层之下 背景透明的方法
当Silverlight整合到网页上的时候,也许不多见,但是也有可能需要将Silverlight置于某层之下,或者使背景透明. 就像FLASH一样,只需要设置标签属性就可以了. 首先看看如何将Silv ...
- 透明背景的loading下载_让输入法键盘背景透明的方法
最近MIUI新版本全局搜索高斯模糊大背景和透明卡片很舒服了,但是搜索的时候输入法的键盘不是透明的,感觉很不搭. 另外,在看直播的时候如果输入法键盘背景是透明的,那也很有沉浸效果: 如何让键盘背景变透明 ...
- 切单个图标为背景透明的方法
切单个图标的方法 1.还是之前的文件,这次我们就切一个图标 2.选择移动工具,并在选项中选中"自动选择"和"图层" 3.点击我们要切的图标,这里是点击中间的 ...
- iframe背景透明设置方法
iframe的背景颜色在IE下为window的当前窗口颜色(默认白色,可以在显示外观处对其进行设置),这导致在大幅背景上插入iframe时,需要给它"透底",可是IE不支持对ifr ...
- 使用swfobject.js调用flash,使flash背景透明的方法
1.使用调用参数的方法: var flashvars = {},params = {wmode:"transparent"},attributes = {};swfobject.e ...
- PB中文字标签背景透明实现方法
定义窗口实例变量:Boolean ib_painting st_1 的 Constructor 事件,程序:BackColor = 2^29 st_1 用 Event ID:pbm_paint 自定义 ...
- ps怎么抠图换背景透明?好用的方法分享给你
ps怎么抠图换背景透明?很多小伙伴应该都ps过图片,也就是处理一些图片进行局部修饰修改.从事做图的小伙伴们应该不会陌生,很多时候会遇到需要把图片的重心地方抠出来背景换成透明,方便与添加其他背景.那么 ...
- html中设置背景透明,css如何设置背景透明
css设置背景透明的方法:首先在[ ]标签创建[ ]标签和添加类:然后在[ 3.为div添加样式.在 标签后面创建一个 4.保存后使用浏览器查看.可以看到当透明度为由0.1修改为1时div背景由灰色变 ...
最新文章
- 东莞日报报道:比派科技(banana pi)致力于打通物联风创业生态链》
- linux printf 刷新,linux下printf中\n刷新缓冲区的疑问(已解决)
- Java开发中使用模拟接口moco响应中文时乱码
- jquery页面跳转带cookie_JS 如何创建、读取和删除cookie
- 在MFC框架下使用osg报内存泄露的解决办法
- Dijkstra Algorithm (迪杰斯特拉算法)
- javascript 请求web service
- Grails 1.2参考文档速读(4):第3章剩余内容
- 大数据分析有哪些陷阱
- 同步与互斥的基本原理
- 公司签到考勤薪资表(Excel导入信息)
- CentOS 7 部署开源sip信令服务器 —— 筑梦之路
- 中国汉字一、二级字库的汉字与unicode编码(十六进制)对照表(收藏)
- Linux进程间通信信号量
- ipa签名工具(IPA Resign Tool)在windows和macos系统下对苹果ipa文件一键重签名
- Access-Control-Allow-Credentials
- (一图胜千言)虚函数实现机制(Vptr, Vtbl)
- 候选码主属性非主属性
- 5个免费PPT素材网站,进来自取
- 使用SQLMAP自动化探测SQL注入