IE, FireFox, Chrome浏览器，CSS实现半透明的方法

最新推荐文章于 2022-11-08 15:46:17 发布

wiflish_xie

最新推荐文章于 2022-11-08 15:46:17 发布

阅读量529

点赞数

分类专栏： web 文章标签： Chrome 浏览器 IE Firefox CSS

web 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

IE, FireFox, Chrome浏览器，CSS实现半透明的方法：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<title>IE, FireFox, Chrome浏览器，CSS实现半透明的方法</title>
<style type="text/css">
.the-transparent {
	 width: 318px;
	 height: 119px;
	 margin-bottom: 10px;
	 -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)"; /*IE8*/
	 filter:alpha(opacity=20);  /* IE6，IE7*/
	 opacity: .2;  /*Opera9.0+，Firefox1.5+，Chrome*/
	 background: #fff; /*支持图片 url(http://www.google.cn/logos/vivaldi10-hp.gif);*/
	 border: 1px solid red;
}
.no-transparent {
  background:#fff;
	 width: 100px;
	 height:100px;
	 border: 1px solid red;
}
</style>
</head>
<body>
    <div class="the-transparent"> 透明效果 </div>
    <div class="no-transparent"> 不透明效果 </div>
</body>
</html>