OK、ページの左側に画像をスライドさせる画像スライダーがあります。それらは下から上にスクロールし続けます。しかし、CSSを使用して画像にも反射を持たせたいと思っていました。そのため、同じ画像で構成される別の div を逆方向に作成し、不透明度を下げたので、反射のように見えますが、完全な画像が反射しているため、全体の外観が損なわれています。そのため、各反射の下に別の div を書きました。これにより、画像の反射がある程度マスクされ、画像の反射と比較してより高い z-index が与えられましたが、とにかくこれは機能していないようです。何を試しても、画像の反射が追加された div の上に来ます。画像のスケールを乱すことなく、または追加されたdiv「オーバーレイ」のために、反射画像をトリミングする方法はありますか 私の場合、反射の上に来ますか？また、私の場合「imagesRow」のすべての画像で構成されるメインの div には、ガラスのように見えるようにスタイルを設定したいと思います。しかし、その div にどのようなスタイルを指定しても、子コンポーネントに自動的に適用されます。内部の画像に影響を与えずに、メインの div の(imagesRow) スタイルを変更する方法はありますか? このリンクは、私が望む助けになるかもしれません。http://jsfiddle.net/659Na/
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);
}