<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <style type="text/css"> body{ margin:0px; padding:0px;} .wrapper { position:relative; width:700px;height:420px; margin:0 auto; overflow:hidden; } .sb-slider { position:absolute; width:700px; list-style:none;overflow:hidden; left:0px; top:0px;margin:0px; padding:0px; } .sb-slider li { margin:0px; padding:0px;width:700px; height:420px; position:relative; } .sb-slider li a{width:700px; height:420px; display:inline-block;} .sb-slider li a img{width:700px; height:420px; border:0px;} .sb-description { position:absolute; left:20px; bottom:0px; width:650px; height:50px; z-index:1000; background: #CBBFAE; background: rgba(190,176,155, 0.4); border-left: 4px solid white; border-left: 4px solid rgba(255,255,255,0.7); -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; filter: alpha(opacity=50); opacity:0.5; color: #fff; line-height:50px; -webkit-transition: all 200ms; -moz-transition: all 200ms; -o-transition: all 200ms; -ms-transition: all 200ms; transition: all 200ms; } .sb-description:hover { -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; filter: alpha(opacity=80); background: rgba(190,176,155, 0.8); } </style> </head> <body> <div class="wrapper"> <ul class="sb-slider"> <li> <a href=""><img src="images/1.jpg" alt="image1"/></a> <div class="sb-description"> Creative Lifesaver </div> </li> <li> <a href="" target="_blank"><img src="images/2.jpg" alt="image2"/></a> <div class="sb-description"> Honest Entertainer </div> </li> <li> <a href="" target="_blank"><img src="images/3.jpg" alt="image1"/></a> <div class="sb-description"> Brave Astronaut </div> </li> <li> <a href="" target="_blank"><img src="images/4.jpg" alt="image1"/></a> <div class="sb-description"> Affectionate Decision Maker </div> </li> <li> <a href="" target="_blank"><img src="images/5.jpg" alt="image1"/></a> <div class="sb-description"> Faithful Investor </div> </li> <li> <a href="" target="_blank"><img src="images/6.jpg" alt="image1"/></a> <div class="sb-description"> Groundbreaking Artist </div> </li> <li> <a href="" target="_blank"><img src="images/7.jpg" alt="image1"/></a> <div class="sb-description"> Selfless Philantropist </div> </li> </ul> </div> </body> </html>
正常样式：
position:absolute;
left:20px;
bottom:0px;
650px;
height:50px;
z-index:1000;
background: #CBBFAE;
background: rgba(190,176,155, 0.4);
border-left: 4px solid white;
border-left: 4px solid rgba(255,255,255,0.7);
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
filter: alpha(opacity=50);
opacity:0.5;
color: #fff;
line-height:50px;
-webkit-transition: all 200ms;
-moz-transition: all 200ms;
-o-transition: all 200ms;
-ms-transition: all 200ms;
transition: all 200ms;
鼠标移到上面样式改变：
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
filter: alpha(opacity=80);
background: rgba(190,176,155, 0.8);