ie8下的透明 问题
团队里经常遇到,索性整理一起
是我们在前端开发中经常遇到的,在问题中经常遇到的两个问题是背景色透明和整体透明
先说下背景色透明,背景色透明,在现代浏览器中,可以用rgba颜色作为背景色。
简单介绍下rgba色,这个是在css3 出现的标准。所谓RGBA颜色,顾名思意就是R+G+B+A的颜色,再具体点就是RED+GREEN+BLUE+ALPHA的颜色,小写一下就是red+green+blue+alpha的颜色,翻译一下就是红+绿+蓝+Alpha透明的颜色。通过改变a的值来改变透明度。
background:rgba(200, 54, 54, 0.5);
这个颜色就是透明度为0.5的颜色背景,
如何处理兼容如果想要IE也支持颜色透明,那就要动用IE的私有滤镜
FILTER:progid:DXImageTransform.Microsoft.Gradient
兼容写法实例:
background:rgba(0,0,0,0.5);
filter:progid:DXImageTransform.Microsoft.gradient(startcolorstr=#7F000000,endcolorstr=#7F000000);
这里的7F是十六进制的表达方式,00 为最小的透明度(完全透明)FF为最大透明值(完全不透明)
下面说下整体透明
整体透明区别于背景色透明就是整个元素的都是透明的,在css3新的标准中为
opacity: .5;
兼容IE的写法
/* IE 4-9 */
filter:alpha(opacity=50);
/*This works in IE 8 & 9 too*/
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
/*IE4-IE9*/
filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=50);
ie8下的透明 问题的更多相关文章
- ie8下jquery改变PNG的opacity出现黑边,ie6下png透明解决办法
目前互联网对于网页效果要求越来越高,不可避免的用到PNG图片,PNG分为几种格 式,PNG8 PNG24 PNG32,其中最常用的,也是显示效果和大小比较适中的则是PNG24,支持半透明,透明,颜色也 ...
- 真~让IE8支持background: rbga; ,IE8下兼容rgba颜色的半透明背景
IE8下兼容rgba颜色的半透明背景 这样的标题在百度和google搜索下很多篇文章,讲解IE8下兼容rgba的. 这些文章全部都是使用IE下的filter来使元素透明,但是这个里面会有bug. 它们 ...
- (转)解决png图片在IE6下不透明的方法
来源于:http://xzl52199.blog.163.com/blog/static/95206446201142174540220/ 一.传统的JavaScript方法 思路: 1.一个专门解决 ...
- ie8下jquery改变PNG的opacity出现黑边
复制网上的,没有他们那个类型的博客,所以就直接复制了 这些天在做一个效果,鼠标经过,PNG图片由透明变成不透明,jquery代 码:$(element).animate({"opacity& ...
- 使用ie的filter来解决rgba在IE8下没有效果的问题
使用ie的filter来解决rgba在IE8下没有效果的问题,css代码如下: background: rgba(255,255,255,0.1); filter:progid:DXImageTran ...
- IE8下导入EXCEL数据传到客户端以附件下载
IE8下导入EXCEL数据传到客户端以附件下载方式出现,而不显示数据,解决方法:以text/html格式返回. HttpResponseMessage message = new HttpRespon ...
- echarts在IE8下遮挡其他组件的问题
echarts的图在IE8下会浮在上层遮挡住其他组件,解决方式是页面中引入 <meta http-equiv="X-UA-Compatible" content=" ...
- jquery.validate.js在IE8下报错不运行
因为项目要表单验证,所以特意去找了jquery.validate这个应该是jquery官方团队出品的表单验证插件. 实际应用时,却在IE8调试时碰到了问题. 从jquery.validate官网下载了 ...
- ie8下背景图片平铺问题
IE9+及其他浏览器实现背景图片平铺可能需要一个属性就可以background-size:100%/cover; 但是ie8下background-size是不兼容的,因此我们需要用到滤镜,来解决背景 ...
随机推荐
- 高性能PHP日志插件--Seaslog
日志系统作为记录系统运行的信息,包括 用户输入,安全日志等,日志系统是不能影响用户的使用. 为什么需要记录日志? 既然日志系统增加了整个系统的开销,为什么我还需要它,这是因为日志能帮我们记录运行的很多 ...
- Sticks(Central Europe 1995) (DFS)
Sticks(Central Europe 1995) Time Limit:1000MS Memory Limit:10000KB 64bit IO Format:%I64d &am ...
- information_schema.character_sets 学习
information_schema.character_sets 表用于查看字符集的详细信息 1.character_sets 常用列说明: 1.character_set_name: 字符集名 2 ...
- Delphi之通过代码示例学习XML解析、StringReplace的用法(异常控制 good)
*Delphi之通过代码示例学习XML解析.StringReplace的用法 这个程序可以用于解析任何合法的XML字符串. 首先是看一下程序的运行效果: 以解析这样一个XML的字符串为例: <? ...
- css案例学习之div+a实现菜单
效果 代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w ...
- Word Ladder II 解答
Question Given two words (beginWord and endWord), and a dictionary's word list, find all shortest tr ...
- yum安装配置mongoDB客户端和服务器端
1,Centos6.X yum安装mongoDB客户端和服务器端; yum -y install mongodb mongodb-server; 基于epel repo.当前的mongoDB的版本为2 ...
- hdu 5631 Rikka with Graph(图)
n个点最少要n-1条边才能连通,可以删除一条边,最多删除2条边,然后枚举删除的1条边或2条边,用并查集判断是否连通,时间复杂度为O(n^3) 这边犯了个错误, for(int i=0;i<N;i ...
- convention-plugin
1.官方介绍的地址: http://struts.apache.org/2.1.6/docs/convention-plugin.html 2.struts.xml文件配置 只挑选几个重要的常量说明: ...
- javascript 判断系统设备
<script> function detectOS() { var sUserAgent = navigator.userAgent; var isWin = (navigator.pl ...