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. aggregation 详解2(metrics aggregations)

    概述 权值聚合类型从需要聚合的文档中取一个值(value)来计算文档的相应权值(比如该值在这些文档中的max.sum等). 用于计算的值(value)可以是文档的字段(field),也可以是脚本(sc ...

  2. CentOS 7 gedit编辑器中文乱码解决方法

    无需root登陆 打开终端输入如下命令: gsettings set org.gnome.gedit.preferences.encodings auto-detected "['GB180 ...

  3. webstorm卡、闪退以及win10中jdk配置

    今天 webstorm 突然一直处于 indexing 索引状态,然后就卡死,重装也无法解决. 搜了一下后,有人说使用 64 位客户端打开就ok. 尝试打开 64 位的客户端,但是报错,没有64位 j ...

  4. 华为在线OJ_找7

    描述 输出7有关数字的个数,包括7的倍数,还有包含7的数字(如17,27,37...70,71,72,73...)的个数 知识点 循环 运行时间限制 0M 内存限制 0 输入 一个正整数N.(N不大于 ...

  5. 第22条:理解NSCopying协议

    如果想自定义类支持拷贝操作,那就要实现NSCopying协议(而不是复写copy方法)或 NSMutableCopying的协议. 不可变版本的拷贝: NSCopying协议,该协议只有一个方法: - ...

  6. Objective-C 【继承、变量修饰符(私有变量/方法)、description方法】

    ------------------------------------------- 继承 一段代码: #import <Foundation/Foundation.h> @interf ...

  7. HDOJ 1423 Greatest Common Increasing Subsequence -- 动态规划

    题目地址:http://acm.hdu.edu.cn/showproblem.php?pid=1423 Problem Description This is a problem from ZOJ 2 ...

  8. mysql5.7的安装

    1.在官网下载解压缩版 2.解压后配置默认文件 新建个my.ini(可以复制一份my-default.ini,并改名为my.ini).my.ini会替换掉下面的my-default.ini文件. 按需 ...

  9. PHPStrom 使用技巧以及基本设置教程【更新完结】

    本博文由北京乐学一百在线教育科技有限公司平台开发组成员提供,在此表示感谢,截图来源于Tower,热力推荐的一款不错的办公工具. 1.SVN链接上的条件下,修改子文件,父文件夹以及祖辈文件夹变色设置:​ ...

  10. VS2010类似Eclipse文件查找功能-定位到

    快捷键:Ctrl + , 打开定位到窗口,可以在文件或类文件中查找内容.