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

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

今天做一个防一些团购网站的信息显示，将图片的说明显示在图片之上且背景半透明效果，然后用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>

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

相关推荐