这个是效果
这个是在一个项目上摘取的
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; 640px; height:292px; overflow:hidden; position:relative; }
ul li .absbg{ position:absolute; left:0px; top:0px; 640px; height:292px; background:#000; filter:alpha(opacity=50); opacity:0.5; display:none; }
ul li.a1 .absbg{ 640px; height:292px;}
ul li a{ position:absolute; padding:10px; font-size:12px; 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; 216px; height:284px; overflow:hidden; }