打赏银两×

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

支付宝支付

微信支付

QQ钱包

支付二维码

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

学习笔记马富天 2016-05-06 19:32:52 26 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>
```

版权归马富天PHP博客所有

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

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

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

顶0

踩0

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

分享到：

暂无评论

评论审核未开启

回复后邮件通知我

随机阅读换一批

TOP10

浏览最多
评论最多

1. Eclipse中...No java virtual machine was found...解决方法（9818）

2. 数据库SQL语句查询指定时间段内的数据（4603）

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

4. input输入框绑定回车事件两种方式（3198）

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

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

7. jQuery中效果animate方法解决width是百分比出现的问题（1604）

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

9. 解决 cmd 窗口 php 输出中文乱码问题（1224）

10. Jquery实现返回顶部，并且缓慢移动到顶部（991）

1. PHP快速入门（18）

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

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

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

5. windows 系统下远程连接电脑如何共享两台电脑的硬盘（3）

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

7. PHP下最好用的富文本HTML过滤器：HTMLPurifier使用教程（3）

8. 如何设置域名邮箱（3）

9. CSS outline 属性介绍（3）

10. PHP 模拟登录（3）