您当前的位置：首页 > 建站常识 > css强化

利用透明度实现隐藏与显示

2016-08-11

　　元素的隐藏与显示，很多时候我们用定位来实现；其实，细心的朋友会发现，用css的透明度也是可以实现的。

　　原理：先设置元素①的透明度为0、元素②的透明度为1，其次，利用父元素的hover属性设置元素①的透明度为1、元素②的透明度为0；

　　以下是代码：

　　<head>

　　<style>

　　　　.trans-fadeout{

　　　　　　-webkit-transition:all 1s linear;

　　　　　　-moz-transition:all 1s linear;

　　　　　　-ms-transition:all 1s linear;

　　　　　　-o-transition:all 1s linear;

　　　　　　transition:all 1s linear;

　　　　}

　　　　.image-fadeout{ position:absolute;opacity:0 }

　　　　.hover-fadeout:hover .image-fadeout{ opacity:1 }

　　</style>

　　</head>

　　<body>

　　　　　　<img src="http://www.20707.net/skin/web/index/d2.png"

　　　　　　　　 class="trans-fadeout image-fadeout" />

　　　　　　<a href="#" _fcksavedurl=""#"" >经过我显示图片</a>

　　　　</div>

　　</body>

　　重要提示：

　　1、元素透明度位1时，即不透明，css代码可以直接省略不写；

　　2、注意透明在不同浏览器的兼容效果；

　　filter:alpha(opacity=50);

　　-moz-opacity:0.5;

　　-khtml-opacity: 0.5;

　　opacity: 0.5;

　　filter:alpha(opacity=50):这个是为IE6设的，可取值在0-100，其它三个0到1.

　　-moz-opacity:0.5; 这个是为了支持一些老版本的Mozilla浏览器。

　　-khtml-opacity: 0.5; 这个为了支持一些老版本的Safari浏览器。

　　opacity: 0.5; 这是最重要的，因为它是CSS标准.该属性支持firefox, Safari和 Opera.

本文关键词：隐藏透明

CSS颜色体系学习小结(	深入浅析border和outl
border:none与border:	CSS隐藏属性加载问题