兼容ie7、8、9、10、FF、Chrome的遮罩显示
经常碰到这种情形,要实现图片上有一层遮罩和按钮,鼠标滑过时遮罩颜色变深且按钮图片变化,磕磕碰碰终于弄出来题目所述兼容的解决方案。
对于遮罩的实现,将遮罩层、按钮、图片放置在同一个div中,根据absolute的位置跟随特性,将遮罩层和按钮放在图片的前面,position均设置为absolute不占据任何空间。设置遮罩层的颜色和透明度,由于颜色和透明度会设置到整个遮罩层及其子元素的透明度,如果将按钮图片放在遮罩层内,按钮图片也会有透明度,达不到所要的视觉效果,所以将遮罩层和按钮图标设置为平级。
然而,在IE7、8中,background-color中rgba并不能表现出遮罩层的效果,所以要将红框内颜色及透明度的写法换一种:
,背景设置为黑色,opacity设置透明度,filter是IE滤镜(为使IE兼容显示透明度)
这样就实现了题目提到的各个浏览器的一致的视觉效果:
兼容ie7、8、9、10、FF、Chrome的遮罩显示的更多相关文章
- DIV+CSS解决IE6,IE7,IE8,FF兼容问题
1.IE8下兼容问题,这个最好处理,转化成IE7兼容就可以.在头部加如下一段代码,然后只要在IE7下兼容了,IE8下面也就兼容了:1. <metahttp-equivmetahttp-equiv ...
- 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 ...
- 关闭浏览器输入框自动补齐 兼容IE,FF,Chrome等主流浏览器
这篇文章主要介绍了关闭浏览器输入框自动补齐 兼容IE,FF,Chrome等主流浏览器,需要的朋友可以参考下.希望对大家有所帮助 Firefox 和 IE 的浏览器各自实现了input历史记录的功能 ...
- 原生js绑定和解绑事件,兼容IE,FF,chrome
主要是最近项目中用到了原生的js 解绑和绑定 事件 然后今天研究了一下,其实问题不大,不过要注意不要把单词写错了,今天我就找了好久单词写错了. 需求:当鼠标移上去以后,给Select加载元素,接着解 ...
- css+js整站变灰(兼容IE7+)
原文:css+js整站变灰(兼容IE7+) 历年大型地震等自然灾害来临过后,各大网站整站都变成灰色以悼念逝去的生命,那么这种整站变灰的效果是怎么做到的? 重写一套css?NO,即便你有这个时间重写,那 ...
- 一个简单有效的兼容IE7浏览器的办法
最近发现了一个简单有效的兼容IE7浏览器的办法 直接将下面代码复制道页面 <meta http-equiv="X-UA-Compatible" content="I ...
- videojs实践--兼容ie7,8
1,还是先上图 ie9+,ff,chrome,,,
- 兼容IE7音乐播放器之jplayer的使用
首先列出为何要写这篇随笔的原因: 1:兼容IE7 2:音乐播放器 3:任意控制播放器 1: 最近做的网站需要兼容IE7,在此之前已经写好了关于音乐播放的插件,火狐,IE8以上,以及谷歌浏览器等都可以随 ...
- 支持 IE8 IE11 和 FF, Chrome 浏览器的圆角
.rounded-corners { position: relative behavior: url(/Styles/PIE.htc); //这里一定是“/”根目录 border-radius: 2 ...
随机推荐
- 浅谈HTTP中Get与Post的区别(转)
Http定义了与服务器交互的不同方法,最基本的方法有4种,分别是GET,POST,PUT,DELETE.URL全称是资源描述符,我们可以这样认为:一个URL地址,它用于描述一个网络上的资源,而HTTP ...
- 4.3.5 使用Http:// (Https://)协议连接到ActiveMQ 2015年9月28日
用到的几点地方: 1.服务器端 ActiveMQ的文件activemq.xml中,预先要定义好有关本协议http的传输连接器格式,抓图如下: 2. 然后,开启Eclipse环境,在publish ...
- HYSBZ 2243
//Accepted 18440 KB 5556 ms /* source:HYSBZ 2243 time :2015.5.29 by :songt */ /*题解: 树链剖分 */ #include ...
- PHP往mysql数据库中写入中文失败
该类问题解决办法就是 在建立数据库连接之后,将该连接的编码方式改为中文. 代码如下: $linkID=@mysql_connect("localhost","root&q ...
- 从C++转向Java的第一课
序:计算机语言的学习,最快捷的方法是从一种语言映射到另一种语言.Java和C++作为最通用的面相对象高级语言,不论从语法或者编程上都极具相似性和可效仿行,这里的可效仿包括——语法理解可效仿和编程规范可 ...
- Python学习路程CMDB
本节内容 浅谈ITIL CMDB介绍 Django自定义用户认证 Restful 规范 资产管理功能开发 浅谈ITIL TIL即IT基础架构库(Information Technology Infra ...
- web兼容行探究1:IE 6 select节点显示在绝对布局之上的解决方法
解决方式就是在绝对布局的元素下放置一个一样大小的iframe元素,这样iframe可以将select盖住,同时解决了问题. 源码如下: <!-- IE6BUG select在絕對定位的元素之上顯 ...
- php大力力 [052节] php数据库页面修改功能
php大力力 [052节] php数据库页面修改功能
- eclipse中将Maven Dependencies Libraries移除后的恢复办法
在eclipse中,如果你不小心在properties=>Java Build Path中将Maven Dependencies Libraries 移除了怎么恢复呢? 解决办法:1.右键你的项 ...
- BZOJ 1046 最长不降子序列(nlogn)
nlogn的做法就是记录了在这之前每个长度的序列的最后一项的位置,这个位置是该长度下最后一个数最小的位置.显然能够达到最优. BZOJ 1046中里要按照字典序输出序列,按照坐标的字典序,那么我萌可以 ...