CSSの下のスライダにアクセスできる100％幅のバックグラウンドマスク

次のCSS divマスクをイメージスライダに配置しました。CSSの下のスライダにアクセスできる100％幅のバックグラウンドマスク

<div class="contentMaskWrapper" > 
    <div class="contentMaskLeft"></div> 
    <div class="contentMaskRight"></div> 
</div> 
<div id="slider"> 
    slider content  
</div> 

.contentMaskWrapper{ 
width:100%; 
overflow:hidden; 
position:absolute; 
z-index:3; 
height:564px; 
    } 
.contentMaskLeft{ 
background:url(../images/mask.png) repeat; 
height:564px; 
width:100%; 
position:absolute; 
left:50%; 
margin-left:425px; 
z-index:999; 
} 
.contentMaskRight{ 
background:url(../images/mask.png) repeat; 
height:564px; 
width:100%; 
position:absolute; 
right:50%; 
margin-right:425px; 
z-index:999; 
} 
#slider{ 
width:850px; 
height:564px; 
margin:0 auto 20px; 
position:relative; 
clear:both; 
overflow:hidden; 
width:100%; }

視覚的に正しく表示されているマスクは、イメージスライダの両側にあります。スライダにはリンクがあり、このリンクはFF、Safari、Chrome（MacまたはPC）ではなくIE（7+）でのみ動作します。

希望はこれが理にかなっています。詳細が必要な場合はお知らせください。助けをお待ちしています。ありがとう、 Jamie

出典

2012-02-16 jamiedollard