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>
    <title></title>
    <style type="text/css">
    .Divspan
   {
        background: none repeat scroll 0 0 rgba(22,123,235,0.5);
        color: #FFFFFF; cursor: pointer; 
        display: block; height: 20px;
        line-height: 20px; 
        margin-top: -20px;
        position: relative; 
        text-align: center;
        z-index: 3;
        filter: progid:DXImageTransform.Microsoft.gradient(startcolorstr=#7F167BEB,endcolorstr=#7F167BEB);
    }
    </style>
</head>
<body>
<div  style=" float:left;">
   <img  src="img/w_dongmanyouxi.jpg" alt="韩庚"/>
    <span class="Divspan" style=" position:relative;">韩庚韩庚韩庚韩庚韩庚</span>
</div>
</body>
</html>

重点:将元素设置成透明,其子元素不会透明CSS

background: none repeat scroll 0 0 rgba(22,123,235,0.5);
filter: progid:DXImageTransform.Microsoft.gradient(startcolorstr=#7F167BEB,endcolorstr=#7F167BEB);


posted @ 2013-02-04 18:01  Journey31  阅读(228)  评论(0编辑  收藏  举报