HTML结构
<a class="pic" href="#"> <img src="../images/test.jpg" /> <div class="hover"> <div class="bg"></div> <div class="content">我是不透明的内容</div> </div> </a>
CSS样式
.pic{width:180px; height:180px; display:block; position:relative;} .hover{display:none;} .pic:hover{zoom:1; cursor:pointer;} .pic:hover .hover{display:block; position:absolute; top:0; left:0; z-index:9; } .hover .bg{width:180px; height:180px; background:#000; opacity:.75; filter:alpha(opacity=75);} .hover .content{width:180px; height:180px; position:absolute; top:0; left:0; color:#fff; z-index:99;}