将图片的说明文字显示在图片之上且背景半透明效果

最新推荐文章于 2021-06-03 17:32:13 发布

蒋光明123

最新推荐文章于 2021-06-03 17:32:13 发布

阅读量615

点赞数

本文链接：https://blog.csdn.net/sdfsdfytre/article/details/86691537

版权

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html>  <head>    <title>将图片的说明文字显示在图片之上且背景半透明效果</title>    <style type="text/css">  body {    text-align: center;    font-family:Verdana;    font-size:14px;   }  .img-demo {    position: relative;    display: block;    height:600px;    width: 435px;   margin: 0 auto;   }  .img-demo cite {    background: #00FFFF;   -moz-opacity:.50;    filter:alpha(opacity=50);    opacity:.50; color: #FF3333;    position: absolute;    bottom: 0px;    left: 0px;    width: 435px;    padding: 10px 0;    border-top: 1px solid #999;   } </style>  </head>  <body>    <div class="img-demo"> <img src="image/boy.jpg" alt="" /> <cite>2012-5-19诺伊尔</cite> </div>  </body></html>