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