今天做一个防一些团购网站的信息显示,将图片的说明显示在图片之上且背景半透明效果,然后用css实习了一下,做了demo,主要运用css定位技术
效果图:
代码实习:
<!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=utf-8" />
<title>将图片的说明显示在图片之上且背景半透明效果</title>
<style type="text/css">
body { text-align: center; font-family:Verdana; font-size:12px; }
.img-demo { position: relative; display: block; width:250px; height:250px; margin: 0 auto; }
.img-demo .info {
background: #EEE; /*设置背景色*/
-moz-opacity:.80; filter:alpha(opacity=80); opacity:.80; color: #000; /*透明度,兼容于其他浏览器*/
position: absolute; bottom: 0; left: 0;/* 定位于其的位置,让其能够显示在图片的上*/
width: 250px; padding: 8px 2px; text-align:left;
}
.redcol{ color:red; }
</style>
</head>
<body>
<h2>将图片的说明显示在图片之上且背景半透明效果</h2>
<div class="img-demo">
<img src="1.jpg" alt="" />
<span class="info">
原价:<span style="text-decoration:line-through">16.00</span>元 折扣:<b>4.4</b>折
<span style="float:right"> <b class="redcol">256</b>人购买</span></span>
</div>
</body>
</html>