Question

好的，所以我有这个图像滑块可以在页面左侧滑动图像。它们从下到上滚动。但是我希望这些图像能够使用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

上的此示例

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

1 个答案: