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. rsync配置

    一.rsync 简介 Rsync(remote synchronize)是一个远程数据同步工具,可通过LAN/WAN快速同步多台主机间的文件,也可以使用 Rsync 同步本地硬盘中的不同目录. Rsy ...

  2. 自定义异常以及runtime类

    一.自定义异常: 1.自定义异常的概念:在java编程中,我们会遇到很多问题,但是这些问题异常,java并没有给我们定义好,那么我们就要自己定义这些异常,这就是自定义异常: 2.throws 是声明异 ...

  3. 关于git fetch 和git pull 的区别

    1.fetch 相当于是从远程获取最新版本呢到本地,不会自动merge. git fetch origin master:tmpgit diff tmp git merge tmp 2. git pu ...

  4. SSRS生成报表

    使用程序运行Reporting Service自动生成文件,可以参数使用ReportExecutionService.Render方法进行处理. 1.     连接至Reporting Service ...

  5. RabbitMQ 原文译02--工作队列

    工作队列: 在上一篇文章中我们我们创建程序发送和接受命名队列中的消息,在这篇文章我会创建一个工作队列,用来把耗时的操作分配给多个执行者. 工作队列(任务队列)的主要实现思想是避免马上执行资源密集型的任 ...

  6. make fontconfig 时出现No package ‘libxml-2.0′ found的解决方法

    这里显示一个错误信息:checking for LIBXML2… configure: error: Package requirements (libxml-2.0 >= 2.6) were ...

  7. 第十八篇、keychain保存UUID(保持唯一性,应用卸载,下载安装也不变)和获取IP地址

    .h #import <Foundation/Foundation.h> #import <Security/Security.h> /**使用**/ //-(void) se ...

  8. touches,motion触摸事件响应

    //触摸事件响应需要重写方法 1 // 触摸时触发该方法(消息发送) - (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent: ...

  9. svn---命令行操作

    一.基本操作 1.checkout是将服务器上的代码下载到本地(下载所有文件).Checkout只需要做一次 2.commit是将本地修改之后的文件提交到服务器(只提交修改之后的).每天下班前:com ...

  10. js 金额格式化

    //格式化金额 function fmoney(s, n) { n = n > 0 && n <= 20 ? n : 2; s = parseFloat((s + &quo ...