兼容opacity的方法

实现图片或背景透明可以使用opacity,如opacity=0.5。但是ie9以下的都不支持,这时候可以使用ie特有的滤镜来实现,只需一句话,filter:alpha(opacity=50);

但是注意,如果是设置一个div的opacity属性,那它里面的元素也都有了透明属性。有的时候我们只想让背景透明,不想让里面的内容透明。

这个时候就考虑rgba颜色。比如

<style type="text/css">.item{background-color:rgba(0,0,0,0.2);}</style>

但是要兼容ie就必须使用滤镜

filter:progid:DXImageTransform.Microsoft.gradient(enabled=‘true‘,startColorstr=‘#33000000‘, endColorstr=‘#33000000‘);zoom:1;

所以可以样式可以写成<style type="text/css">.item{background-color:rgba(0,0,0,0.2);filter:progid:DXImageTransform.Microsoft.gradient(enabled=‘true‘,startColorstr=‘#33000000‘, endColorstr=‘#33000000‘);zoom:1;}</style>

这样问题又出现了,ie9就就会出现双重滤镜,背景越来越不透明了,要去掉ie9中的滤镜就可以针对csshack写了

<!--[if lte IE 8]>
<style>
 .item{filter:progid:DXImageTransform.Microsoft.gradient(enabled=‘true‘,startColorstr=‘#33000000‘, endColorstr=‘#33000000‘);zoom:1;}
</style>
<![endif]-->

问题解决了

兼容opacity的方法

时间: 2024-10-05 23:33:27

兼容opacity的方法的相关文章

Hyper-V和VMware Workstation不兼容的解决方法

win+x 以管理员帐号登录系统,进入到cmd dos命令窗口 打开开始菜单的运行选项,输入cmd(或者直接在开始菜单的搜索栏搜索cmd), <1>C:\Users\Administrator>bcdedit /copy {default} /d "win8专业版 without Hyper-v" 已将该项成功复制到 {a74ddcfd-338d-11e2-9a5f-accc08373f35}. <2>C:\Users\Administrator>b

iphone6来了,我该做点什么(兼容iphone6的方法)

北京时间2014年9月10日凌晨1点,苹果公司正式发布其新一代产品 iPhone6,相信做webapp开发的同学对它是充满了好奇和等待,也担心它带来各种坑爹,高清的分辨率,升级的retina显示屏,我们该如何做好适配呢? 相比iPhone5,iPhone6拥有更高分辨率的retina HD display,而iPhone6 plus的像素密度达到了401ppi,相比原来的326ppi,提升了25%,显示画面细节更丰富. iPhone6 Plus设备高为736pt,宽为414pt,缩放比例为@3X

个人总结 css 浏览器兼容常见问题总结方法

1.如何让整个界面不出现滚动条,铺满整个浏览器.方法:在body中加overflow: hidden;有时候会出现底部有一段的空白,解决方法在form中加overflow: hidden;. 2.height:100%或者是width:100% 一加这个就会出现滚动条,除非控制. 3.IE显示下有时候字体会比其他浏览器显示的要小,解决方法:用IEhack区分不同浏览器 font-size:10px; 所有浏览器都可识别font-size:10px\9;所有IE浏览器都可识别font-size:1

PNG兼容IE6解决方法

虽然说现在早就不用ie6浏览器了,可以还是有一小部分还在使用 ,刚好公司也有要求~~~ <p>E6不兼容png图片,确实让网页的图片质量大大下降,为了兼容万恶的IE6,总结了下面几种方法: 1,通过CSS滤镜使背景图的PNG对IE6进行兼容. 2,给img定义样式,页面上所有透明png即自动透明了. 3,通过JS,插入一段代码,实现img标签png兼容IE6的问题. 4,可以把png图片,转换为gif图片.(最简单常用的方法) </p> <br/> 第一种方法:<

HTML5上传视频无法播放以及兼容的解决方法

一.视频无法播放原因分析 1.路径不对 <video width="100%" height="100%" controls="controls">   <source src="images/apply.mp4" type="video/mp4"></source>  </video> 在images前面不加斜杠,使用相对路径,不要使用绝对路径 2.视频格式

js 浏览器兼容的一些方法

使用js是一件令人很抓狂的事情,很多的浏览器兼容,一大推的代码,谁的脑袋能记住那么多的东西,只有平时多积累,所谓熟能生巧嘛..这里列出一些常用的兼容代码,一点点积累哈~~~ 一.以跨浏览器的方式处理事件.这个叫EventUtil对象定义了一些方法,用来处理各浏览器之间的差异. var EventUtil={ addHandler:function(element,type,handler){//绑定事件 if(element.addEventListener){ element.addEvent

jQuery兼容浏览器IE8方法

1.前言 在做前端开发的时候,公司的规范要求面向客户的兼容到IE8,但是在IE8模式下经常会发现各种错误,某某方法未定义.不支持某属性或对象等,使用jQuery的时候,jQuery从2.0开始不兼容IE8,最低支持IE9,所以需要引入更低的jQuery版本来兼容. 2.IE8不支持jQuery版本解决办法 通过判断IE浏览器的版本来加载对应版本的jQuery 使用语句<!--[if IE 8]> 仅IE8可识别 <![endif]--> 可在IE8模式下进行一些兼容操作.代码如下:

Javascript的DOM中兼容问题以及解决兼容问题的方法

一.获取非行内样式的方法和它的兼容问题及解决方式 方 法 一:getComputedStyle(obox,false)  第一个参数表示要获取的对象,第二个值指定一个要匹配的伪元素的字符串.必须对普通元素省略(或null)false也可以.主要针对正常浏览器 方 法 二:Element.currentStyle  在IE浏览器中使用 解决兼容问题的方式: function getStyle(ele,attr){ if(ele.currentStyle){ return ele.currentSt

低版本IE浏览器不兼容placeholder解决方法

虽说现在很多网站都放弃了IE浏览器的低版本,但是很多时候咱们还得看甲方的要求就制作网站.如果甲方要求兼容IE789,那么咱们就得给人家做出来兼容的产品. 今天就IE789的input标签的placeholder说一说解决方法. 一.优雅降级解决(极力推荐) 也就是俗称的不解决细节,只要大体能满足浏览的要求就可以,placeholder低版本不显示,那么咱们就不在去做兼容方法,反正以后的几年IE低版本的浏览器会被淘汰. 二.使用input的value制作placeholder的效果 这个是我以前用