经常碰到这种情形，要实现图片上有一层遮罩和按钮，鼠标滑过时遮罩颜色变深且按钮图片变化，磕磕碰碰终于弄出来题目所述兼容的解决方案。

对于遮罩的实现，将遮罩层、按钮、图片放置在同一个div中，根据absolute的位置跟随特性，将遮罩层和按钮放在图片的前面，position均设置为absolute不占据任何空间。设置遮罩层的颜色和透明度，由于颜色和透明度会设置到整个遮罩层及其子元素的透明度，如果将按钮图片放在遮罩层内，按钮图片也会有透明度，达不到所要的视觉效果，所以将遮罩层和按钮图标设置为平级。

   

然而，在IE7、8中，background-color中rgba并不能表现出遮罩层的效果，所以要将红框内颜色及透明度的写法换一种：

 ，背景设置为黑色，opacity设置透明度，filter是IE滤镜（为使IE兼容显示透明度）

这样就实现了题目提到的各个浏览器的一致的视觉效果：

     

兼容ie7、8、9、10、FF、Chrome的遮罩显示的更多相关文章

  1. DIV+CSS解决IE6，IE7，IE8，FF兼容问题

    1.IE8下兼容问题,这个最好处理,转化成IE7兼容就可以.在头部加如下一段代码,然后只要在IE7下兼容了,IE8下面也就兼容了:1. <metahttp-equivmetahttp-equiv ...

  2. DIV+CSS解决IE6，IE7，IE8，FF兼容问题(转至http://www.douban.com/note/163291324/)

    2011-07-25 21:11:47     DIV+CSS解决IE6,IE7,IE8,FF兼容问题 1.IE8下兼容问题,这个最好处理,转化成IE7兼容就可以.在头部加如下一段代码,然后只要在IE ...

  3. 关闭浏览器输入框自动补齐 兼容IE,FF,Chrome等主流浏览器

    这篇文章主要介绍了关闭浏览器输入框自动补齐 兼容IE,FF,Chrome等主流浏览器,需要的朋友可以参考下.希望对大家有所帮助   Firefox 和 IE 的浏览器各自实现了input历史记录的功能 ...

  4. 原生js绑定和解绑事件,兼容IE,FF,chrome

    主要是最近项目中用到了原生的js 解绑和绑定 事件  然后今天研究了一下,其实问题不大,不过要注意不要把单词写错了,今天我就找了好久单词写错了. 需求:当鼠标移上去以后,给Select加载元素,接着解 ...

  5. css+js整站变灰（兼容IE7+）

    原文:css+js整站变灰(兼容IE7+) 历年大型地震等自然灾害来临过后,各大网站整站都变成灰色以悼念逝去的生命,那么这种整站变灰的效果是怎么做到的? 重写一套css?NO,即便你有这个时间重写,那 ...

  6. 一个简单有效的兼容IE7浏览器的办法

    最近发现了一个简单有效的兼容IE7浏览器的办法 直接将下面代码复制道页面 <meta http-equiv="X-UA-Compatible" content="I ...

  7. videojs实践--兼容ie7,8

    1,还是先上图 ie9+,ff,chrome,,,

  8. 兼容IE7音乐播放器之jplayer的使用

    首先列出为何要写这篇随笔的原因: 1:兼容IE7 2:音乐播放器 3:任意控制播放器 1: 最近做的网站需要兼容IE7,在此之前已经写好了关于音乐播放的插件,火狐,IE8以上,以及谷歌浏览器等都可以随 ...

  9. 支持 IE8 IE11 和 FF, Chrome 浏览器的圆角

    .rounded-corners { position: relative behavior: url(/Styles/PIE.htc); //这里一定是“/”根目录 border-radius: 2 ...

随机推荐

  1. hibernate开发(1)

    1 什么是ORM OR-mapping 是 object relational mapping 对象关系映射,是一种程序技术,用于实现面向对象编程语言里不同类型系统的数据之间的转换.解决了不同数据库s ...

  2. Dapper学习笔记（5）-存储过程

    一.无参存储过程 第一步:创建一个不带参数的存储过程,代码如下: CREATE PROCEDURE [dbo].[QueryRoleNoParms] AS BEGIN SELECT * FROM T_ ...

  3. 音频软件消除人声的一点体会（cood edit ,goldwav)

    音频软件消除人声的一点体会(cood  edit ,goldwav) 使用方法: 1.打开文件 2.命令处理(红色位置可以调整到你认为合适的数据或效果) 3.效果:两个软件均处理后的效果均可以接受.不 ...

  4. js 表单验证方法二

    function ckReight () { var pass = true; var new = $("#new"); if( new.find('input[name=name ...

  5. web系统测试 - 理解网络协议1 - 互联网历史沿革

    1. web1.0,web2.0,web3.0的区别? web1.0:信息的获取者和消费者,信息由网站运营商创建 web2.0:用户创建内容(UGC: user generated content,论 ...

  6. iOS交互WebService(cxf框架)

    公司后台java用的cxf框架,说是iOS.Android.web客户端都可以通用,但是我还是第一次遇到,所以做的时候遇到了不小的坑.下面总结下我开发中遇到的问题以及解决方案: 首先,后台提供了一份接 ...

  7. 从angularJS改道Vue.js,趟过第一个坑!

    vue采用 new vue()初始化,显然vue内部没有类似jquery ready函数的机制,在文档加载完成后再执行初始化. 今天新学习vue,由于vue采用es5的特殊机制更新UI,我不确定ipa ...

  8. opnet学习过程

    学习opnet有一段时间了,走了 不少弯路,现在,想总结一下,推荐给大家一个比较好的学习过程. 因为英语不太好,所以在开始学opnet时用了很多心思去找中文资料,比如说,一些文档.书.视频等.看文档和 ...

  9. C#单链表

    顺序表是用地址连续的存储单元顺序存储线性表中的各个数据元素, 逻辑上相邻的数据元素在物理位置上也相邻.因此,在顺序表中查找任何一个位置上的数据元素非常方便, 这是顺序存储的优点. 但是, 在对顺序表进 ...

  10. 十个最适合 Web 和 APP 开发的 NodeJS 框架

    在浏览器以外运行 JavaScript 对于 JavaScript 爱好者来说非常神奇,同时也肯定是 web 应用程序开发界最受欢迎的进步之一.全球各地的开发者张开双臂拥抱 NodeJS. 对于新手来 ...