实现背景透明而容器上的图片不透明效果的实现技巧
品牌店铺 新入驻优化 之 透明效果的实现 的一个技巧
效果页面：http://www.mall.taobao.com/go/chn/mall/brandshop_index.php
1.html 结构代码
<div >
</div>
<a href="#" ><img src="logo.png"/></div>
<div 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>
总结：之前在父容器上直接写透明样式，发现会把其包含的子元素 的图像也透明掉 几翻尝试后问前辈闭月，再额外增加了一个空白容器
并将其绝对定位到原来位置，这样使其透明，而其上的子元素就不会透明了
另外，由于实现的要求 结构上很多是不符合语义要求的 以后要尽量写更符合标准的结构及样式。
