图片阴影显示文字

最新推荐文章于 2021-01-14 01:14:07 发布

转载最新推荐文章于 2021-01-14 01:14:07 发布 · 180 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/fengkuangkg/p/3267880.html

这个是效果

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

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; }

　　源码下载

转载于:https://www.cnblogs.com/fengkuangkg/p/3267880.html