*****使div背景层透明，但是其中的文字不透明*****

解析：

需要三个div

①第一个div是载体！

②第二个div是背景层，透明度。

③第三个div是文字层！

结构如下：

<div class='con'>
      <a href='#'><img src="http://placehold.it/280x310/<?php echo $color; ?>&text=tuangouIMG<?php echo $n; ?>" width='280' height='310' /></a>
      <div class='title-tuangou'></div>
      <div class='tg-content'>
        <div class='tg-title'>
            团购产品<?php echo $n; ?>
            <span>团购价格：177￥</span>
        </div>
        <div class='tg-text'>
            这里介绍内容
        </div>
    </div>
</div>       

.con是第一个div,其样式如下：

.con{
    border-left:3px solid #fff;
    border-right:3px solid #fff;
    margin-bottom:22px;
    height:310px;
    width:280px;
    margin:auto;
    margin-bottom:10px;
    border:1px solid #aaa;
    padding:4px;
    position:relative;          
}

透明层：

.title-tuangou{
    position:relative;
　　bottom:50px;
　　right:0;
　　background:#000;
　　width:272px;
　　height:42px;
　　z-index:10;
　　color:#fff;
　　font-size:12px;
　　padding:4px;
　　filter:alpha(opacity=50);
　　opacity:0.5;
}

文字层：

 .tg-content{
        color:#fff;
        position:relative;
        bottom:0;
        right:0;
        z-index:1000;
        bottom:98px;
        height:44px;
        margin-left:4px;
　　　　 margin-right:4px;  
    }
 .tg-content .tg-title{
        font-weight:700;color:#fff;
        font-size:12px;
        height:20px;
    }
 .tg-content .tg-title span{
        display:block;float:right;
    }
 .tg-content .tg-text{
        color:#ccc;
        font-size:12px;
        height:22px;
    }

设置了一些简单样式！

注意点：

就是文字层的z-index值较之透明层要高，且设置position:relative;