团队里经常遇到,索性整理一起

是我们在前端开发中经常遇到的,在问题中经常遇到的两个问题是背景色透明整体透明


先说下背景色透明,背景色透明,在现代浏览器中,可以用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下的透明 问题的更多相关文章

  1. ie8下jquery改变PNG的opacity出现黑边,ie6下png透明解决办法

    目前互联网对于网页效果要求越来越高,不可避免的用到PNG图片,PNG分为几种格 式,PNG8 PNG24 PNG32,其中最常用的,也是显示效果和大小比较适中的则是PNG24,支持半透明,透明,颜色也 ...

  2. 真~让IE8支持background: rbga; ,IE8下兼容rgba颜色的半透明背景

    IE8下兼容rgba颜色的半透明背景 这样的标题在百度和google搜索下很多篇文章,讲解IE8下兼容rgba的. 这些文章全部都是使用IE下的filter来使元素透明,但是这个里面会有bug. 它们 ...

  3. (转)解决png图片在IE6下不透明的方法

    来源于:http://xzl52199.blog.163.com/blog/static/95206446201142174540220/ 一.传统的JavaScript方法 思路: 1.一个专门解决 ...

  4. ie8下jquery改变PNG的opacity出现黑边

    复制网上的,没有他们那个类型的博客,所以就直接复制了 这些天在做一个效果,鼠标经过,PNG图片由透明变成不透明,jquery代 码:$(element).animate({"opacity& ...

  5. 使用ie的filter来解决rgba在IE8下没有效果的问题

    使用ie的filter来解决rgba在IE8下没有效果的问题,css代码如下: background: rgba(255,255,255,0.1); filter:progid:DXImageTran ...

  6. IE8下导入EXCEL数据传到客户端以附件下载

    IE8下导入EXCEL数据传到客户端以附件下载方式出现,而不显示数据,解决方法:以text/html格式返回. HttpResponseMessage message = new HttpRespon ...

  7. echarts在IE8下遮挡其他组件的问题

    echarts的图在IE8下会浮在上层遮挡住其他组件,解决方式是页面中引入 <meta http-equiv="X-UA-Compatible" content=" ...

  8. jquery.validate.js在IE8下报错不运行

    因为项目要表单验证,所以特意去找了jquery.validate这个应该是jquery官方团队出品的表单验证插件. 实际应用时,却在IE8调试时碰到了问题. 从jquery.validate官网下载了 ...

  9. ie8下背景图片平铺问题

    IE9+及其他浏览器实现背景图片平铺可能需要一个属性就可以background-size:100%/cover; 但是ie8下background-size是不兼容的,因此我们需要用到滤镜,来解决背景 ...

随机推荐

  1. mysql中查看字符集的cmd指令

    参看下面链接:http://blog.chinaunix.net/uid-20180960-id-1972668.html

  2. YUI的UA检测

    YUI.UA是针对javascript的宿主环境检测的一个检测对象,返回的是一系统关于当前宿主的信息 1.对象相关信息列表及userAgent 检测对象o = { ie: 0, //ie Mozill ...

  3. ETL概述

    转自:http://blog.csdn.net/leosoft/article/details/4279536 ETL,Extraction-Transformation-Loading的缩写,中文名 ...

  4. java中的File.separator

    前些天遇到一个问题,困扰了好久,现在终于解决了. 问题:上传的图片不能正确显示. 我的开发环境是在Windows下,工程在Windows下能正常部署,上传的图片也可以正常的显 示.但是把工程部署在服务 ...

  5. php5.5新特性之yield理解

    今天,在阅读别人代码时,其中出现了一个陌生的关键字yield,想一探究竟,于是找到:http://php.net/manual/zh/language.generators.overview.php ...

  6. popup

    http://vast-engineering.github.com/jquery-popup-overlay/ http://photoswipe.com/

  7. HTML5 JavaScript 文件上传

    function fileUpload(targetUrl) { // 隐藏表单名称 var inputName = '_fileselect'; // 文件尺寸 this.fileSize = 0; ...

  8. 异常处理与调试3 - 零基础入门学习Delphi52

    异常处理与调试3 让编程改变世界 Change the world by program 两种结构的嵌套 要在一个过程里同时实现处理异常和保护资源分配,关键要保证"try-except&qu ...

  9. Prime Path(POJ 3126 BFS)

    Prime Path Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 15325   Accepted: 8634 Descr ...

  10. 移动端Web App自适应布局探索

    1.困扰多时的问题 在这之前做Web App开发的的时候,在自适应方面一般都是宽度通过百分比,高度以iPhone6跟iPhone5之间的一个平衡值写死,我们的设计稿都是iPhone5的640 * 11 ...