实现背景透明而容器下的图片不透明效果的实现技巧

实现背景透明而容器上的图片不透明效果的实现技巧
品牌店铺新入驻优化之透明效果的实现的一个技巧
效果页面：http://www.mall.taobao.com/go/chn/mall/brandshop_index.php
1.html 结构代码
<div class="xie-slide">
<ul class="xie-tab-panel">
<li>
<b class="slide-title"></b>

<div class="capcity" >
</div>
<a href="#" class="re-more">
<div class="logo" ><img src="logo.png"/></div>
<div class="announce-text">
<div><strong>主营:</strong>服装，饰品</div>
<div><strong>活动:</strong><u>满100减80全场包邮</u></div>
<p>
迪赛 (Diesel) 是著名的意大利牛仔时装品牌，由伦佐·罗索
(Renzo Rosso) 在1978年创立，并成为意大利时装企业“天才集团”
(Genius ) 旗下14个品牌之一。当时Diesel还不过是个二线品牌，
价值700万美元 (Genius集团拥有Katherine Hamnett、Martin Guy、
Ten Big Boys等流行品牌)
</p>
</div>
</a>
<a href="http://fordoo.taobao.com" target="_blank">
<img src="test.jpg" alt="虎都" style="vertical-align: top;" />
</a>
</li>
</ul>
</div>
2.css 代码
/* re-more @start added by chunxiao */
.capcity /* 空白容器实现透明效果 */
{
background:#ffffff;
opacity: .6;
filter: alpha(opacity = 60);
}
.xie-slide .re-more,.capcity {
    position: absolute;
    left: 18px;
    top: 18px;
    width: 213px;
height:200px;
overflow:hidden;
display:block;
}
.xie-slide .re-more .logo
{
    height: 66px;
display: block;
text-align:center; /* logo img center align*/
border-bottom:1px solid #767676;
}
.xie-slide .re-more .logo img
{
    width: 80px; /* the logo must be 80*40 */
    height: 40px;
border:solid 1px #919191;
margin-top:14px;
}
.xie-slide .re-more .announce-text
{
color:#000000;
border-top:1px solid #ffffff;
cursor:hand;/* for ie6 */
display:block;
}
.announce-text strong
{
font-size:14px;
margin-left:14px;

margin-right:8px;
}
.announce-text p
{
overflow:hidden;
margin:5px 14px 10px 14px;
height:70px;
opacity: .5;
    filter: alpha(opacity = 50);
}
.xie-slide li a:hover{
    text-decoration: none;
}
/* re-more @end */
3.js
<script>
KISSY.Slide('#J_reTab',
{
navCls: 'tabbar',
contentCls: 'xie-tab-panel',
activeTriggerCls: 'selected',
viewSize:[260],
effect: 'scrolly',
easing: YAHOO.util.Easing.easeOutStrong});
</script>
总结：之前在父容器上直接写透明样式，发现会把其包含的子元素的图像也透明掉几翻尝试后问前辈闭月，再额外增加了一个空白容器
并将其绝对定位到原来位置，这样使其透明，而其上的子元素就不会透明了
另外，由于实现的要求结构上很多是不符合语义要求的以后要尽量写更符合标准的结构及样式。

实现背景透明而容器下的图片不透明效果的实现技巧

相关推荐