0
OK, 그래서이 이미지 슬라이더는 페이지의 왼쪽에 이미지를 슬라이드합니다. 그들은 아래에서 위로 스크롤을 계속합니다. 그러나 CSS를 사용하여 이미지에 반사 효과가 나타나기를 바랍니다. 그래서 같은 이미지를 반대 방향으로 배치하고 불투명도가 낮은 다른 div를 작성하여 반사처럼 보이지만 전체 이미지가 전체 모양의 파손을 반영합니다. 그래서 나는 이미지 반사를 어느 정도 마스킹 할 각 반사 아래에 또 다른 div를 썼다. 이미지 반사와 비교했을 때 더 높은 z- 인덱스를 주었지만 어쨌든 이것은 작동하지 않는 것처럼 보인다. 상관없이 내가 뭘 시도 이미지 반사는 추가 div 위의 온다. 반사 이미지가 이미지의 스케일을 방해하지 않고자를 수있는 방법이 있습니까? 아니면 추가 된 div "오버레이"가 내 반사에 오게 할 수 있습니까? 그리고 나의 경우 "imagesRow"에있는 모든 이미지들로 구성된 메인 div도 유리처럼 보이도록 스타일링을하고 싶습니다. 그러나 내가 div에주는 스타일은 자동으로 하위 구성 요소에 적용됩니다. 그래서 거기에 이미지를 영향을주지 않고 주 div (imagesRow) 스타일을 변경할 수있는 방법은 무엇입니까? 이 링크는 내가 원하는 모든 도움이 될 수 있습니다. http://jsfiddle.net/659Na/다른 div 또는 다른 방법을 사용하여 이미지 반사를 자르기
HTML 코드 :
<div id="imagesRow" style="position: absolute;top:5px;">
<marquee behavior="scroll" direction="up" onmouseover="this.stop();" onmouseout="this.start();" height="725" >
<div id="l1" class="father">
<img class="messagesOne" src="images/images.png">
<div class="reflection">
<img src="images/images.png" />
<div class="overlay"></div>
</div>
</div>
<div id="l2" class="father">
<img class="messagesOne" src="images/image3.png">
<div class="reflection">
<img src="images/image3.png" />
<div class="overlay"></div>
</div>
</div>
<div id="l3" class="father">
<img class="messagesOne" src="images/image5.png">
<div class="reflection">
<img src="images/image5.png" />
<div class="overlay"></div>
</div>
</div>
<div id="l4" class="father">
<img class="messagesOne" src="images/image7.png">
<div class="reflection">
<img src="images/image7.png" />
<div class="overlay"></div>
</div>
</div>
</br>
</br>
<div id="l5" class="father">
<img class="messagesOne" src="images/image9.png">
<div class="reflection">
<img src="images/image9.png" />
<div class="overlay"></div>
</div>
</div>
<div id="l6" class="father">
<img class="messagesOne" src="images/image11.png">
<div class="reflection">
<img src="images/image11.png" />
<div class="overlay"></div>
</div>
</div>
<div id="l7" class="father">
<img class="messagesOne" src="images/image12.png">
<div class="reflection">
<img src="images/image12.png" />
<div class="overlay"></div>
</div>
</div>
<div id="l8" class="father">
<img class="messagesOne" src="images/image14.png">
<div class="reflection">
<img src="images/image14.png" />
<div class="overlay"></div>
</div>
</div>
<div id="l9" class="father">
<img class="messagesOne" src="images/image15.png">
<div class="reflection">
<img src="images/image15.png" />
<div class="overlay"></div>
</div>
</div>
<div id="l10" class="father">
<img class="messagesOne" src="images/image16.png">
<div class="reflection">
<img src="images/image16.png" />
<div class="overlay"></div>
</div>
</div>
<div id="l11" class="father">
<img class="messagesOne" src="images/image17.png">
<div class="reflection">
<img src="images/image17.png" />
<div class="overlay"></div>
</div>
</div>
</marquee>
</div>
CSS 파일 :
.messagesOne{
height: 60px;
width: auto;
margin-left: 56px;
}
.reflection img {
-webkit-transform: scaleY(-1);
-moz-transform: scaleY(-1);
-ms-transform: scaleY(-1);
-o-transform: scaleY(-1);
transform: scaleY(-1);
filter: flipv; opacity:0.20;
filter: alpha(opacity='20');
height: 60px;
width: auto;
margin-left: 56px;
z-index: -1100;
}
.overlay {
margin-top: -44px;z-index: 1000; width:auto; height:60px;
background-color: black;
filter: progid:DXImageTransform.Microsoft.Gradient(gradientType=0, startColor=0, EndColorStr=#ffffff);
}