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

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

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

先看下面的效果图:

请输入图片名称

网页代码如下:

  1. <!DOCTYPE>
  2. <html>
  3. 	<head>
  4. 		<title>网页中透明度四种不同的样式(兼容性)</title>
  5. 		<meta charset = "utf-8" />
  6. 		<style type="text/css">					
  7. 			*{
  8. 				margin:0;
  9. 				padding:0;
  10. 				font-size:12px;
  11. 			}
  12. 			div{
  13. 					width:100px;
  14. 					height:100px;
  15. 					border:1px solid red;
  16. 					margin:10px auto;
  17. 					color:red;
  18. 					text-align:center;
  19. 					vertical-align:center;
  20. 					padding:10px;
  21. 			}
  22. 			div:nth-child(1){
  23. 				background-color:rgba(0,0,255,0.7);
  24. 			}
  25. 			div:nth-child(2){
  26. 				background-color:#0000FF;
  27. 				opacity:0.7;
  28. 			}
  29. 			div:nth-child(3){
  30. 				background-color:#0000FF;
  31. 				filter:alpha(opacity=50);
  32. 			}
  33. 			div:nth-child(4){
  34. 				background-color:#0000FF;
  35. 				-moz-opacity:0.7;
  36. 			}
  37. 			div:nth-child(5){
  38. 				background-color:#0000FF;
  39. 			    /* older safari/Chrome browsers */  
  40. 			    -webkit-opacity: 0.5;  
  41. 			    /* Netscape and Older than Firefox 0.9 */  
  42. 			    -moz-opacity: 0.5;  
  43. 			    /* Safari 1.x (pre WebKit!) 老式khtml内核的Safari浏览器*/  
  44. 			    -khtml-opacity: 0.5;  
  45. 			    /* IE9 + etc...modern browsers */  
  46. 			    opacity: .5;  
  47. 			    /* IE 4-9 */  
  48. 			    filter:alpha(opacity=50);  
  49. 			    /*This works in IE 8 & 9 too*/  
  50. 			    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";  
  51. 			    /*IE4-IE9*/  
  52. 			    filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=50); 				
  53. 			}
  54. 		</style>		
  55. 	</head>
  56. 	<body>
  57. 		<div>background-color:rgba(0,0,255,0.3);</div>
  58. 		<div>background-color:#0000FF;opacity:0.3</div>
  59. 		<div>background-color:#0000FF;filter:alpha(opacity=80);</div>
  60. 		<div>background-color:#0000FF;-moz-opacity:0.8;</div>
  61. 		<div>兼容性最好的方式</div>
  62. 	</body>	
  63. </html>

版权归 马富天PHP博客 所有

本文标题:《网页中透明度四种不同的样式(兼容性)》

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

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

0

0

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

暂无评论

评论审核未开启
表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情
验证码

TOP10

  • 浏览最多
  • 评论最多