IE过渡滤镜 + CSS3 rgba 即可完美实现。

  具体实现代码如下:

.transparent {
    background:rgba(0, 0, 0, 0.3);
    filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#4c000000', EndColorStr='#4c000000');
}
:root .transparent {
    filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#00000000', EndColorStr='#00000000');
}

  提示:IE9 支持 filter 与 rgba 属性,这会导致其背景透明度双倍叠加!

解决:使用 :root 伪类为 IE9 单独写 HACK 并将其透明度降为 0 即可。

CSS 实现背景半透明的更多相关文章

  1. css实现背景半透明文字不透明的效果

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  2. CSS实现背景透明/半透明效果的方法

    全透明代码:{background:transparent} 半透明代码:{filter:alpha(opacity=80);-moz-opacity:0.8;width:auto !importan ...

  3. [小技巧]兼容IE6的纯CSS背景半透明文字不透明

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. css设置div等标签背景半透明

    三种方式: 1. background-color: transparent; 直接设置背景为透明 2.这种是子元素也会跟着变成半透明 /* 背景半透明,1为不透明 */ opacity: 0.5; ...

  5. 兼容IE、Firefox的背景半透明内容不透明设置

    首先要说明的是背景是内容的祖先元素.如果是兄弟节点那就没有必要记录这篇文章了. 记录一下,知其然也知其所以然. IE8-特点: 1.不支持"opcity:0.5;"这种写法,只支持 ...

  6. DIV背景半透明文字不半透明的样式

    DIV背景半透明,DIV中的字不半透明 代码如下:<body bgcolor="#336699"> <div style="filter:alpha(o ...

  7. 【27前端】背景半透明rgba LESS实践

    今天有看到司徒正美<背景半透明rgba最佳实践>的文章和里面推荐的一个在线工具CSS背景颜色属性值转换  . 于是联系到自己的less库,新技能Get. 内容如下: /*在你的less库中 ...

  8. CSS实现文字半透明显示在图片上方法

    CSS实现文字半透明显示在图片上方法 在css中文字半透明我们会需要使用滤镜效果也就是css中的filter:alpha来实现了,下面来看两个文字显示在图片上并且半透明的例子. CSS让一行文字显示在 ...

  9. CSS的背景

    CSS的背景 1. 背景颜色background-color div { background-color: 颜色值; } 一般情况下元素背景颜色默认是transparent(透明). 2. 背景图片 ...

随机推荐

  1. 汉诺塔的问题:4个柱子,如果塔的个数变位a,b,c,d四个,现要将n个圆盘从a全部移到d,移动规则不变

    四柱汉诺塔问题的求解程序.解题思路:如a,b,c,d四柱. 要把a柱第n个盘移到目标柱子(d柱),先把上层 分两为两部份,上半部份移到b柱,下半部分移到c柱,再把第n盘移到 目标柱子,然后,c柱盘子再 ...

  2. 20150503-struts2入门-标签

    一.几个标签介绍 1.property标签 property标签用于输出指定值: <s:set name="name" value="'kk'" /> ...

  3. MySQL支持多种存储引擎

    MySQL的强大之处在于它的插件式存储引擎,我们可以基于表的特点使用不同的存储引擎,从而达到最好的性能. MySQL有多种存储引擎:MyISAM.InnoDB.MERGE.MEMORY(HEAP).B ...

  4. 设计模式------PROTOTYPE(原型),TEMPLATE(模板)

    看链接:http://blog.csdn.net/wuzhekai1985/article/details/6667020.纯属为自己学习所使用. 对于原型模式的理解:就如连接中所说,制作简历时先手写 ...

  5. FFMPEG高级编程第一篇:环境搭建及编译

    前段时间在翻看电脑里面资料时,发现了以前做的在嵌入式硬件上面运行以ffmepg为基础,以嵌入式硬件解码的多媒体播放工作,发现都快忘记完了.今日得闲整理温习了一下ffmpeg在嵌入式上的运用,这里给大家 ...

  6. bzoj1002:[FJOI2007]轮状病毒

    思路:一道很裸的生成树计数问题,然而要高精度,而且听说直接行列式求值会被卡精度,所以可以模拟行列式求值的过程得到递推公式:f[i]=3*f[i-1]-f[i-2]+2,证明详见vfk博客: http: ...

  7. asp.net弹出框后页面走样

    1.去掉language='javascript' ,问题依旧 2.后面加上Response.Write("<script>document.location=document. ...

  8. CentOS7 安装LAMP环境

    1.使用yum安装 yum -y install httpd mysql mysql-server php php-mysql postgresql postgresql-server php-pos ...

  9. jquery与后台相互传递中文参数乱码

    前端.后台传递中文参数,乱码的情况: var a="参数乱码"; //编译两次        window.location.href=encodeURI(encodeURI(&q ...

  10. 关于NPC和NP-Hard问题

    参考链接: 1. P.NP.NPC和NP-hard问题的理解 参考:<算法导论>