css Фоновая маска шириной 100% с доступом к слайдеру внизу - PullRequest
Новая
       5

css Фоновая маска шириной 100% с доступом к слайдеру внизу

0 голосов
/ 16 февраля 2012

Я поместил следующую 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).

Надеюсь, это имеет смысл. Пожалуйста, дайте мне знать, если вам нужно больше информации. Ценю любую помощь. Спасибо, Джейми

Ответы [ 2 ]

0 голосов
/ 16 февраля 2012

как я заметил. Ваша маска перекрывает ваш слайдер. попытайтесь изменить его положение, поместив ползунок выше, сделав его z-индекс выше, чем маска.

0 голосов
/ 16 февраля 2012

Это очевидно, потому что обе ваши маски закрывают ссылку в вашем слайдере. (У них более высокий z-индекс, и область, покрытая только полями каждой маски, также считается охватывающей)

Решение может включать абсолютное позиционирование без полей (левая маска будет слева: 0px и соответственно справа), или вы можете попытаться поместить свой ползунок поверх масок, но только с действительно необходимым размером (который в вашем случае составляет 425px * 2 = 850 пикселей)

...