CSS Filter背景透明提示

更新時間：2009年11月03日 23:05:20 作者：

使用CSS的Filter濾鏡實現(xiàn)的小效果，鼠標懸停時激活本效果，是一個半透明的圖片提示層，本代碼演示了核心的實現(xiàn)方法，你可以舉一返三，作出更強大的效果來。

<!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> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>CSS的Filter背景透明提示</title> <style> *{ margin:0; padding:0;} body{ margin:0 auto; font-size:12px;} .model{margin:0 auto; width:30px;} .model a:hover{ text-decoration:none;} .model a img{ border:#fff 1px solid;} .model a:hover img{ border:#888 1px dotted;} .model a span{ padding:0; display:block; width:80px; height:50px; margin-top:-32px; overflow:hidden; line-height:14px; filter: Alpha(opacity=0); opacity:.0; cursor:pointer; text-align:center;} .model a:hover span{ color:#fff; background:#000; padding:0; display:block; width:84px; height:54px; margin:-36px 0 0 1px!important; margin:-36px 0 0 0px; overflow:hidden; line-height:16px; filter: Alpha(opacity=60); opacity:.6; text-align:left; text-align:center;} .model2{margin:0 auto; width:30px;} .model2 a:hover{ text-decoration:none;} .model2 a img{ border:#fff 1px solid;} .model2 a:hover img{ border:#888 1px dotted;} .model2 a span{ padding:0; display:block; width:180px; height:50px; margin-top:-32px; overflow:hidden; line-height:14px; filter: Alpha(opacity=0); opacity:.0; cursor:pointer; text-align:center;} .model2 a:hover span{ color:#fff; background:#000; padding:0; display:block; width:480px; height:16px; margin:-36px 0 0 1px!important; margin:-20px 0 0 0px; overflow:hidden; line-height:16px; filter: Alpha(opacity=60); opacity:.6; text-align:left; text-align:center;} </style> </head> <body> <div   id="wppm3vysvbp"   class="model"><a href="#"><img src="/upload/2009-11/20091103230519197.jpg" border="0" /><span>我可愛嗎？</span></a></div> </body> </html>

[Ctrl+A 全選注:引入外部Js需再刷新一下頁面才能執(zhí)行]

您可能感興趣的文章: