opacity:0.5;

　　　　filter:Alpha(opacity=40); //IE8以下

　　　　当我们设置opacity透明时，opacity后代元素会随着一起具有透明性，所以我们Opacity中的文字随着透明值下降越来越看不清楚，而RGBA不具有这样的问题，但是IE浏览器不支持rgba属性。

　　　　

　　　　

<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>Document</title>

	<style type="text/css">

		.container{

			width: 500px;

			height:378px;

			margin: 100px auto;

			position: relative;

		}

		.container i{

			width: 500px;

			height:378px;

			position: absolute;

			top: 0px;

			color:#fff;

			font-size: 50px;

			background-color: #000;

			/* 字颜色会变 */

			/* opacity: 0.4;

			filter: Alpha(opacity=40); */

			/* 字颜色不会变 */

			background: transparent;

			background-color: rgba(0, 0, 0,0.5);

			filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr=#80000000, endColorstr=#80000000);

		}

	</style>

</head>

<body>

	<div class="container">

		<i>喵喵喵</i>

		<img src="a6.jpg">

	</div>

</body>

</html>

　　

背景透明IE和rgba的更多相关文章

  1. opacity的背景透明&background中rgba的背景色透明

    近期使用css实现了一个loading旋转加载的图片效果,类似gif动画 过程中,需要透明背景,但是图片不要透明 只要背景透明!只要背景透明!只要背景透明! 这里对透明模糊了,两种写法,模糊了 A: ...

  2. input设置背景透明、placeholder的字体颜色及大小

    1.设置input背景透明: background:rgba(255,255,255,0.1); 前面三个参数为对应的rgb数值,第四个参数为透明度:0~1,0:透明,1:不透明: 2.设置input ...

  3. 通过IE私有滤镜让IE6 7 8支持背景透明，内容不透明效果。

    CSS3已经支持背景rgba的rgba透明度,这一方法可以避免元素内容也随背景一起变透明(详情请阅http://www.cssha.com/css3-new-knowledge-student).但是 ...

  4. 【原】CSS实现背景透明，文字不透明，兼容所有浏览器

    11.11是公司成立的日子,16岁啦,我呢3岁半,感谢公司给了这样一个平台,让我得以学习和成长,这里祝愿公司发展越来越好~ 进入主题,每年11月11号是光棍节,产生于校园,本来只是一流传于年轻人的娱乐 ...

  5. CSS实现背景透明，文字不透明（兼容各浏览器）

    在 FF/Chrome 等较新的浏览器中可以使用css属性background- color的rgba轻松实现背景透明,而文字保持不透明.而IE6/7/8浏览器不支持rgba,只有使用IE的专属滤镜f ...

  6. CSS实现背景透明，文字不透明，兼容所有浏览器

    11.11是公司成立的日子,16岁啦,我呢3岁半,感谢公司给了这样一个平台,让我得以学习和成长,这里祝愿公司发展越来越好~ 进入主题,每年11月11号是光棍节,产生于校园,本来只是一流传于年轻人的娱乐 ...

  7. css 背景透明文字(内容)不透明三种实现方法

    好久没写博客了.以前还想着最少一个月抽空写几篇.结果没做到O(∩_∩)O~~.好吧.现在努力,继续坚持. 看着以前写的东西,感觉自己在逐渐成长. 先上图: 本文主要记录如上图一样的.文字或内容不透明, ...

  8. CSS实现背景透明，文字不透明（各浏览器兼容）

    /*CSS*/.waps{ background:url(07158.bmp) no-repeat top center fixed; width:1004px; text-align:center; ...

  9. 背景透明文字不透明的最佳方法兼容IE(以背景黑色透明度0.5为例)

    以背景黑色,透明度0.5举例为大家详细介绍下关于背景透明,文字不透明的最佳方法同时兼容IE,具体实现如下,感兴趣的朋友可以参考下哈希望对大家有所帮助 以背景黑色,透明度0.5举例 非IE:backgr ...

随机推荐

  1. text-size-adjust的值为100% 代替值 none

    iPhone 横屏默认会放大文字,设置text-size-adjust会解决这个问题 一般用text-size-adjust:none 但建议用100%代替none text-size-adjust: ...

  2. EF6 第一次，或者相隔一段时间变慢咋办? 我们来优化下

    第一.问题原因分析 EF方面的原因: 1.Code First第一次启动会对比程序中的Model与数据库表(database initializer ),生成Model与数据库的映射视图 2.随着EF ...

  3. viewpager处理（三）：让viewpager不预加载下一页

    有时候viewpager加载页面的时候,我们发现页面的数据量很大,预加载的话会消耗性能,为了节省用户流量和手机性能,所以我们想让viewpager不自动预加载下一页,怎么实现呢? viewpager预 ...

  4. Entity Framework 学习高级篇2—改善EF代码的方法（下）

    ,IQueryable<Customers>>( (database) => database.Customers.Where(c => c.City == " ...

  5. WPF子窗体：ChildWindow

    wpf的子窗体选择有很多种,如最常见的是项目新建窗体(Window)作为子窗体 ,或者新建wpf用户控件(UserControl).而其实利用Xceed.Wpf.Toolkit.dll 可以轻松布局如 ...

  6. NPAPI简介

    原文出处:http://blog.csdn.net/wwwsq/article/details/8254911 NPAPI是电脑上大部分非ie浏览器都支持的一种浏览器扩展,类似ie的activex技术 ...

  7. Tinyxml封装类COperatorXml

    OperatorXml.h头文件 #ifndef _OPERATOR_XML_H_ #define _OPERATOR_XML_H_ #include <string> class TiX ...

  8. 在Activity之间使用Intent传值和Bundle传值的区别和方式

    两者本质上没有任何区别.Bundle只是一个信息的载体 将内部的内容以键值对组织 Intent负责Activity之间的交互 自己是带有一个Bundle的Intent.putExtras(Bundle ...

  9. java 继承与多态

    Example5_11.java class 动物 { void cry() { } } class 狗 extends 动物 { void cry() { System.out.println(&q ...

  10. hdu_4897_Little Devil I(树链剖分)

    题目连接:http://acm.hdu.edu.cn/showproblem.php?pid=4897 题意:有三种操作,1是在树上的两个节点之间的路径改变当前的颜色,2是改变树上有且只有一个端点在u ...