图片阴影显示文字

这个是效果

这个是在一个项目上摘取的

html

<html>
<title>阴影显示图片文字</title>
<link href="style.css" rel="stylesheet"  type="text/css" />
<body>
          <ul>
            <li class="a1">
              <img src="2jpg.jpg" alt="少女物语--梦瑶." />
              <a title="少女物语--梦瑶." href="#"><strong>少女物语--梦瑶.</strong>
                  <br>
                  <span>我一生渴望把你收藏好，妥善安放…</span>
                  <br>
                  查看详情
              </a>
              <i class="absbg"></i>
            </li>
          </ul>
</body>
</html>

　　这个是css

li{ list-style-type:none;}

ul li.a1{ left:0px; top:0px; width:640px; height:292px; overflow:hidden; position:relative; }
ul li .absbg{ position:absolute; left:0px; top:0px; width:640px; height:292px; background:#000; filter:alpha(opacity=50); opacity:0.5; display:none; }
ul li.a1 .absbg{  width:640px; height:292px;}
ul li a{ position:absolute; padding:10px; font-size:12px; width:90px; height:90px; overflow:hidden; left:0px; top:0px; color:#fff; font-family:'Microsoft YaHei'; z-index:2; display:none; }
ul li:hover a{ display:block; text-decoration:none; }
ul li:hover .absbg{ display:block; }
ul li a strong{ line-height:2em; }
ul li.a1 a{ padding:45px 20px 15px 30px; font-size:18px; width:216px; height:284px; overflow:hidden; }

　　源码下载

posted @ 2013-08-19 15:08  ~KG~  阅读(324)  评论(0)  编辑  收藏  举报