html - 使用其他 div 或任何其他方法裁剪图像反射

Question

好的，所以我有这个图像 slider ，它可以在页面左侧滑动图像。他们不断地从下往上滚动。但我希望图像也能使用 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);

}

Answer 1

我认为您可以通过简化代码来获得效果。叠加层不是必需的。

像这样设置 .reflection 的样式:

.reflection  {height:20px;  overflow:hidden; margin:-10px 0 10px 0;}

请参阅 jsfiddle 中的示例