Question

我在图像滑块上放置了以下CSS div掩码。

<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%; }

显示视觉上正确的遮罩位于图像滑块的两侧。滑块有一个链接，此链接仅适用于IE（7+），而不是FF，Safari或Chrome（Mac或PC）。

希望这是有道理的。如果您需要更多信息，请告诉我。感谢任何帮助。谢谢，杰米

Answer 1

这显然是因为你的两个面具都覆盖了滑块中的链接。（它们具有更高的z指数，并且仅由每个掩模的边缘覆盖的面积也算作覆盖）

解决方案可能包括没有边距的绝对定位（左面罩左侧：0px;右侧分别）或者您可以尝试将滑块放在面罩顶部，但只能使用真正需要的尺寸（在您的情况下为425px） * 2 = 850px）

Answer 2

正如我注意到的那样。你的面具与你的滑动物重叠。尝试通过使z-index高于蒙版来放置滑块来改变它的定位。

css 100％宽度背景蒙版，可以访问下方的滑块

2 个答案: