打赏银两×

博主辛苦了，我要打赏银两给博主，犒劳犒劳站长。

支付宝支付

微信支付

QQ钱包

支付二维码

网页中透明度四种不同的样式（兼容性）

学习笔记马富天 2016-05-06 19:32:52 81 0

【摘要】有的时候我们需要网页有透明的效果，但是有的时候我们虽然能够找到相应的透明效果（CSS样式），但是兼容性并不是很好，我总结了一份比较好的兼容性透明效果。

先看下面的效果图：

请输入图片名称

网页代码如下：

```
<!DOCTYPE>
```
```
<html>
```
```
	<head>
```

		<title>网页中透明度四种不同的样式（兼容性）</title>

```
		<meta charset = "utf-8" />
```
```
		<style type="text/css">					
```
```
			*{
```
```
				margin:0;
```
```
				padding:0;
```
```
				font-size:12px;
```
```
			}
```
```
			div{
```
```
					width:100px;
```
```
					height:100px;
```
```
					border:1px solid red;
```
```
					margin:10px auto;
```
```
					color:red;
```
```
					text-align:center;
```
```
					vertical-align:center;
```
```
					padding:10px;
```
```
			}
```
```
			div:nth-child(1){
```
```
				background-color:rgba(0,0,255,0.7);
```
```
			}
```
```
			div:nth-child(2){
```
```
				background-color:#0000FF;
```
```
				opacity:0.7;
```
```
			}
```
```
			div:nth-child(3){
```
```
				background-color:#0000FF;
```
```
				filter:alpha(opacity=50);
```
```
			}
```
```
			div:nth-child(4){
```
```
				background-color:#0000FF;
```
```
				-moz-opacity:0.7;
```
```
			}
```
```
			div:nth-child(5){
```
```
				background-color:#0000FF;
```

			    /* older safari/Chrome browsers */

```
			    -webkit-opacity: 0.5;  
```

			    /* Netscape and Older than Firefox 0.9 */

```
			    -moz-opacity: 0.5;  
```

			    /* Safari 1.x (pre WebKit!) 老式khtml内核的Safari浏览器*/

```
			    -khtml-opacity: 0.5;  
```

			    /* IE9 + etc...modern browsers */

```
			    opacity: .5;  
```
```
			    /* IE 4-9 */  
```
```
			    filter:alpha(opacity=50);  
```
```
			    /*This works in IE 8 & 9 too*/  
```

			    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";

```
			    /*IE4-IE9*/  
```

			    filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=50);

```
			}
```
```
		</style>		
```
```
	</head>
```
```
	<body>
```

		<div>background-color:rgba(0,0,255,0.3);</div>

		<div>background-color:#0000FF;opacity:0.3</div>

		<div>background-color:#0000FF;filter:alpha(opacity=80);</div>

		<div>background-color:#0000FF;-moz-opacity:0.8;</div>

```
		<div>兼容性最好的方式</div>
```
```
	</body>	
```
```
</html>
```

版权归马富天个人博客所有

本文标题：《网页中透明度四种不同的样式（兼容性）》

本文链接地址：http://www.mafutian.com/96.html

转载请务必注明出处，小生将不胜感激，谢谢! 喜欢本文或觉得本文对您有帮助，请分享给您的朋友 ^_^

顶0

踩0

上一篇《介绍3个CSS中很常用的结构伪类》下一篇《 CSS样式文字超出部分自动转成省略号》

暂无评论

评论审核未开启

回复后邮件通知我

随机阅读换一批

TOP10

浏览最多
评论最多

1. 安全扫描工具 AWVS 8.0,AWVS 9.x,AWVS 10.5,AWVS 11 破解版下载（7444）

2. 微信分享第三方网站链接时显示缩略图和描述的方法（6470）

3. 四大常用知名的uci数据集简介（3018）

4. 该网页无法正常运作,ERR_BLOCKED_BY_XSS_AUDITOR,关闭 Google 浏览器的 xss 过滤机制的方法（2299）

5. PHP 处理图片时报错：Warning: imagecreatefromjpeg(): gd-jpeg: JPEG library reports unrecoverable error（1885）

6. Eclipse中...No java virtual machine was found...解决方法（1881）

7. 使用 ctrl c 中断 python 程序时如何做到优雅的退出（1851）

8. 【宅男福利】如何通过番号看电影（1735）

9. Microsoft OLE DB Provider for ODBC Drivers 错误 '80004005' 解决办法（1715）

10. sublime text 3 关闭弹出的更新版本提示 Update Available / a new version of Sublime Text is available, download now?（1625）

1. PHP快速入门（20）

2. 微信分享第三方网站链接时显示缩略图和描述的方法（9）

3. JavaScript中alert()方法重写（6）

4. 二分查找算法的时间复杂度计算（logN）（5）

5. Apache 2.4.9 开启 Gzip 压缩服务，并解决开启后 http 304 状态码失效问题（5）

6. 在 Centos 下命令行中使用 PHP 获取服务器 IP 地址（5）

7. Wap 手机端页面 history.go(-1) 返回上一级页面的初始位置，而不是顶部的解决办法（4）

8. CloverFlush.dll 没有被指定在 Windows 上运行，或者它包含错误。（4）

9. MySQL 中 delete 语句中的子查询限制（3）

10. 字符串 "open_door" 转成 "OpenDoor","make_by_id" 转成 "MakeById"（3）